title: ng-change function called multiple times from input inside ng-repeat
body: <p>Well, I have a issue here. I have an ng-repeat inside which an input with ng-change() is present. This is a part of directive template and double way binded to a parent object. If I type in something in input box, everything works fine and parent object is updated.  However, when I have to replace the parent object from directive's controller, I face an issue.</p>
  
  <p>The issue is that, once parent object gets replaced, the view is bound with new (replaced) values. Also at that time the same function (as in ng-change()) is triggered manually for some calculation.</p>
  
  <p>However, I noticed that the same function is again getting called again (no idea how). The important thing is the ng-model of input is undefined, when they are automatically called. As a result, finally the parent object contains value undefined.</p>
  
  <p>I am still confused, why the ng-change is getting called, after the controller method calls. Is it have to do something with child scopes that ng-repeat creates.</p>
  
  <p>I have already used track by $index.
  and I have binded models to parentObj.something.something[$index]</p>
  
  <p>Any help on above is appreciated...</p>
  
  <p>I have </p>
  
  <pre><code> module.directive('myDirective', function () {
          return {
              scope: {
                  target: '=',
                },
              controller: 'DemoController',
              templateUrl: 'app/demo/html/demo.html'
  }
  });
  </code></pre>
  
  <p>Main template:</p>
  
  <pre><code>&lt;li ng-repeat="l in group_Main.mains"
  &lt;li ng-repeat="target in l.description.Value track by $index"
  &lt;li ng-repeat="(key, groups) in target.group track by $index"&gt;
   &lt;div layout="row" layout-wrap myDirective  target="group"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;/li&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>app/demo/html/demo.html:</strong>:<strong>Directive's template</strong></p>
  
  <pre><code>&lt;div class="table_FY_height" flex ng-repeat="m in months track by $index"&gt;
  &lt;input ng-change="changeIt(target.targets.years[1].values.data[$index], target, year,parent, $index)"" ng-if="$index&gt;currentMonth"  ng-model="target.targets.years[1].values.data[$index]"/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>In directive's controller:</p>
  
  <pre><code>module.controller('DemoController', function($scope, $rootScope){
  changeIt(-1,$scope.target,$scope.year,$scope.parent);
  }
  </code></pre>
  
  <p>From directive's controller, I am trying to call a API and update <strong>target</strong> data as:</p>
  
  <pre><code> http.get(url).then({
      function(APIResponse){
  for(var i=0; i&lt;12; i++){
      target.targets.years[1].values.data[i] = APIResponse.targets.years[1].values.data[i]
  }}, function(error){
      //error handling here}
      }
  </code></pre>
  
  <p>Doing this calls the dirrective and updates the view on screen with new values from APIResponse. Since, the directive view is controlled using ng-show, the new values remain intact in the view. This function is called once in controller per directive call with first argument as -1. But after that it again runs with first value as 'undefined'. With undefined, it runs as many times as the directive is compiled. Consequently the <strong>target.targets.years[1].values.data[$index]</strong> becomes undefined.</p>
  
  <p>Any ideas whats going wrong? I have been scratching my head over it for hours.</p>