While using ng-bind got Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! in angularjs?

Question

I have the following code which binds and displays date of the due_date. Actually I'm trying to bind the Due_date value into another input ng-module as another, so I have used the below given HTML coding.

My HTML:

<p><input type="text" data-ng-model="another" ng-bind="another=addDays(sryarndebitnote.invoice_date, sryarndebitnote.terms) | date:'dd-MM-yyyy'"></p>

My controller:

 $scope.addDays = function(stringDate, days) {
   var date = new Date(stringDate);
   date.setDate(date.getDate() + parseInt(days));
  return date;
}

When I run the above code, I get the following error:

Error: Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: ngModelWatch; newVal: \"2016-08-22T00:00:00.000Z\";

I have created Plunker for reference: My plunker

Ideas of why I'm getting this error?

Answer 1

Instead of using ng-model and ng-bind together, What you should do is as you are using ng-bind only for initializing another. Instaed use ng-init. Like this:

function AngularCtrl($scope) {
   $scope.predicate = 'score';
   $scope.reverse = true;
    
     $scope.addDays = function(stringDate,days) {
   var date = new Date(stringDate);
   date.setDate(date.getDate() + parseInt(days));
  return date;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="AngularCtrl" ng-app>
        <input type="text"  data-ng-model="another" ng-init="another=addDays('Fri Aug 12 2016 18:06:22',5)  | date:'dd-MM-yyyy'" style="width:400px;" >
</div>

In the code have taken some random date just for demo purpose you can pass your own values. Here is the working fiddle link. Hope it helps.