**.then** function of promiseB receives what is returned from **.then** function of promiseA.

here promiseA is returning is a number, which will be available as **number** parameter in success function of promiseB. which will then be incremented by 1

There are few things to set up so your link in the browser will look like **://yourdomain.com/path** and these are your angular config + server side

*1) AngularJS*
***$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);***
*2) server side,* put .htaccess inside your root folder and paste this
***RewriteEngine On
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]***

*HTML*
******
*JAVASCRIPT*
***var angularApp = angular.module('ManagerApp', []);
angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {

$scope.customParams = {};

$scope.updateCustomRequest = function (data, type, res) {
$scope.customParams.data = data;
$scope.customParams.type = type;
$scope.customParams.res = res;
$scope.sampletext = "input text: " + data;
};



}]);

function ajaxResultPost(data, type, res) {
var scope = angular.element(document.getElementById("MainWrap")).scope();
scope.$apply(function () {
scope.updateCustomRequest(data, type, res);
});
}***

You can always use a **type=text** and **display:none;** since Angular ignores hidden elements. As OP says, normally you wouldn't do this, but this seems like a special case.
******

pass the $event object into ng-click callback and stop the propagation inside of it:
******
***$scope.nextImage = function($event) {
$event.stopPropagation();
// Some code to find and display the next image
}***

I had the same problem and came up with this snippet. It uses $watch and $evalAsync to ensure your code runs after directives like ng-repeat have been resolved and templates like {{ value }} got rendered.
***app.directive('name', function() {
return {
link: function($scope, element, attrs) {
// Trigger when number of children changes,
// including by directives like ng-repeat
var watch = $scope.$watch(function() {
return element.children().length;
}, function() {
// Wait for templates to render
$scope.$evalAsync(function() {
// Finally, directives are evaluated
// and templates are renderer here
var children = element.children();
console.log(children);
});
});
},
};
});***

Hope this can help you with your problem.

We should need to bootstrap the modules to have multiple ng-app within the same page. Many thanks for all the inputs.
***var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
***
***



***