Using Promise in Angular

by Tarek Faham

HTML

<body ng-app="app">
<div ng-controller='theController'>
  <span>MyVale = {{myValue}}</span><br>
  <span>Step = {{step}}</span>
  <script >
  	angular.module('app', []).
    controller('theController', ['$scope', '$q', function ($scope, $q) {
    	$scope.addOne = function(num) {
      	//debugger;
      	var q = $q.defer();
        $scope.step++;
        if (angular.isNumber(num)) {
        	setTimeout(function (){q.resolve(num+1)}, 3000);
        }
        else {
        	q.reject('NaN')
        }
        
        return q.promise;
      }
      
      $scope.myValue = 0;
      $scope.step = 0;
      $scope.promise = $scope.addOne($scope.myValue);
      $scope.promise.
      then(function (v){return $scope.addOne(v)}).
      then(function (v){return $scope.addOne("3")}).
      then(function (v){return $scope.addOne(v)}).
      then(
      	function (v){$scope.myValue = v},
        function (err) {$scope.myValue = err}
       )
    }])
  </script>
</div>
 
</body>