title: Updating an ng-repeat property in one controller based on the ng-repeat property of another controller?
body: <p>I have two separate Angular controllers, one in the main content area (<code>homeCtrl</code>) showing a list of events, and one in the sidebar (<code>sidebarCtrl</code>) showing a list of tags for events.</p>
  
  <pre><code>// homeCtrl.js
  $scope.events = [{
    name: "Example Event Name",
    tags: [
      {  
         "id":7,
         "name":"Imaginon",
         "following": "false"
      },
    ]
  }];
  </code></pre>
  
  <p>In the sidebar controller I have a collection of the most frequently used tags:</p>
  
  <pre><code>// sidebarCtrl.js
  $scope.tags = [  
    {  
       "id":17,
       "name":"MintMuseum",
       "following": "true"
    },
    {  
       "id":7,
       "name":"Imaginon",
       "following": "false"
    }];
  </code></pre>
  
  <p>I would like it so that if the user starts following a tag in the sidebar, the tag gets highlighted in both the sidebar and in the home feed. If we were <em>just</em> trying to highlight it in the sidebar that would be easy enough:</p>
  
  <pre><code>// sidebar.html
  &lt;div ng-repeat="tag in tags"&gt; 
    &lt;li ng-class="{highlighted: tag.following}" ng-click="followTag(tag)"&gt;{{ tag.name }}
  &lt;/div&gt;
  </code></pre>
  
  <p>But I don't know how to then highlight all instances of that tag color in the home feed. It would be super easy in jQuery by just giving each instance of tag in the document a class of <code>tag_17</code> (or whatever ID that tag happened to be) but it'd be nice to avoid jQuery and use Angular's data binding paradigm if possible.</p>
  
  <p>Any suggestions? </p>