title: AngularJS : How to update controller scope associated to directive scope's object as it changes?
body: <p>Here's the explanation:</p>
  
  <p>I have the current controller that creates an array of $scope.plan.steps which will be used to store every step:</p>
  
  <pre><code>.controller('PlanCtrl', function ($scope, $http) {
      $scope.plan = {
          steps: [{}]
      };
  
      $scope.addStep = function () {
          $scope.tutorial.steps.push({});
      }
  }
  </code></pre>
  
  <p>Then I have the following directive which has an isolated scope and that is associated to the index of the $scope.plan.steps array:</p>
  
  <pre><code>.directive('planStep', function () {
      return {
          template: '&lt;input type="text" ng-model="step.name" /&gt;{{step}}',
          restrict: 'E',
          scope: {
              index: '=index'
          },
          transclude: true,
          controller: function($scope, $element, $transclude) {
  
              $scope.removeStep = function() {
                  $scope.$emit('removeStep', $scope.index);
                  $element.remove();
                  $scope.$destroy();
              }
  
          }
      };
  });
  </code></pre>
  
  <p>These two communicate, create, and delete objects inside of the controller's scope, however, how can I allow the directive to update the controller's scope array in real time? </p>
  
  <p>I've tried doing a $watch on the directive's isolated scope changes, $emit the changes to the controller, and specify the $index... But no luck.</p>
  
  <p><strong>I've created a plunker</strong> to reproduce what I currently have: <h3><a href="http://plnkr.co/edit/s6BRYExbSoAK7ibQglUs?p=preview" rel="nofollow">Link</a></h3></p>
  
  <p>So far I can create and delete objects inside of the array, but I cannot get a single object to update the controller's object based on the $index.</p>
  
  <p>If the explanation was not clear, by all means, let me know and I will elaborate.</p>
  
  <p>Thank you</p>