title: AngularJS - Issues with events inside controller instances generated by ng-repeat
body: <p>today I'm experiencing an issue that sounds weird to me but has some logical explanation for sure...</p>
  
  <p>I'm building a table where I'm allowing to inline edit the fields values. You see a span with the title for instance, and then if you click it, the inline edit appears.</p>
  
  <p>This is the wrapper of the ng-repeat</p>
  
  <pre><code>&lt;div ng-repeat="product in products" ng-controller="ProductController"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you see, new instance of ProductController is created with each iteration. Product controller triggers some events, and catch them accordingly.</p>
  
  <pre><code>myApp.controller('ProductController', function ($scope, $filter, $http, $document) {
  //Show publications flag
  $scope.showPublications = false;
  
  //Inline edition object
  $scope.inlineEdition = {
      enabled: false,
      title: false,
      sku: false,
      realstock: false,
      minstock: false
  };
  
  $document.bind('click', function(e) {
      e.stopPropagation();
  
      //Dispatch an event
      $scope.$emit("documentclick");
  });
  
  angular.element(".dev-inline-editor").bind('click', function(e) {
      e.stopPropagation();
  });
  
  angular.element(".inline-edit").bind('click', function(e) {
      e.stopPropagation();
      //Dispatch an event
      $scope.$broadcast("inlineEditWrapperClicked",[$scope.inlineEditionGetStatus('enabled')]);   
  });
  
  angular.element(".inventory-field span").bind('click', function(e) {
      e.stopPropagation();
  });
  
  $scope.$on("inlineEditWrapperClicked", function(e, inlineStatus) {
      if(inlineStatus[0] === true) {
          $scope.$apply(function () {
              $scope.terminateInlineEdition();
              e.stopPropagation();
          })
      }
  });
  
  $scope.$on("documentclick", function (e) {
      $scope.$apply(function() {
          $scope.terminateInlineEdition();
      })
  
  });
  
   //Code goes on...
  </code></pre>
  
  <p>Then the markup...</p>
  
  <pre><code>&lt;div class="inventory-field inventory-row-minstock inline-edit inline-edit-regular"&gt;
     &lt;span ng-hide="inlineEditionGetStatus('minstock')" ng-click="setInlineEdition('minstock')"&gt;{{product.min_stock}}&lt;/span&gt;
     &lt;div ng-show="inlineEditionGetStatus('minstock')" class="dev-inline-editor clearfix"&gt;      &lt;input  type="text" ng-model="product.min_stock" /&gt;
      &lt;input type="button" ng-click="inlineEditionEnd('minstock')" value="Ok" /&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>inlineGetStatus returns true or false. It should hide the editor on a true value, that explains why $scope.$on("inlineEditWrapperClicked" expects a true value.</p>
  
  <p>The span inside the main div shows the field value, when clicked it shows the inputs. The idea is that when you click outside the inline editor, it will disappear and the span will be restored to a visible state.</p>
  
  <p>Everything works like a charm... but....</p>
  
  <p>When I have for instance a table with three rows I can open the three inline editors clicking them once. Everything fine until there. If I click outside the editor in the last row, that editor will be hidden and the span showing the field value restored. BUT if I click outside the first editor in the first row, the first, second and third editors will be hidden at the same time. It seems like a chain effect downwards the controller instances.</p>
  
  <p>I've tried using $emit, $broadcast, nothing seems to fix the undesired effect. I'm stuck here, so I would really appreciate if someone can enlighten me.</p>
  
  <p>Something really weird is that everytime that I logged a property that come from a getter getInlineEditorStatus(); it returned as many logs as controllers instances I have (or rows). I wasnt able to access just the scope instance that I needed.</p>
  
  <p>I really would like to thank you guys in advance for any help you can give me.</p>
  
  <p>Regards,</p>
  
  <p>Guillermo</p>