title: Changes to scope on click are not being updated across my app
body: <p>Started using Angular last week, read/watched many tutorials and I'm currently trying to  build a newsfeed type application.</p>
  
  <p>Here's the skinny: I have a service that gets data from the server. On the newsfeed itself I have two controllers: one that has the entire newsfeed in its scope and another that has an instance for each newsfeed article. If the user clicks an icon on an individual post it should call a service that has been injected into both controllers and then broadcasts a message that the main controller picks up. The main controller then updates a variable in a filter, filtering the newsfeed content based on the user's selection.</p>
  
  <p>Here's the problem: Everything works fine except that the main controller doesn't update the bound variable in the HTML. I have read close to every SO article on two-way binding within an ng-repeat and the related struggles, but in my case the bound variable falls outside an ng-repeat, hence why I'm posting.</p>
  
  <p>The code:</p>
  
  <pre><code>services.factory('filterService', function() {
  var filterService = {};
  
  filterService.filterKey = '';
  
  filterService.getFilter = function() {
      return filterService.filterKey;
  };
  
  filterService.setFilter = function(name) {
      filterService.filterKey = name;
      $rootScope.$broadcast('changeFilter');
  };
  
  return filterService;
  </code></pre>
  
  <p>});</p>
  
  <pre><code>app.controller('CommentCtrl', function($scope, $timeout, $http, filterService) {
  
  $scope.setSearchParam = function(param) {
      alert('clicked: ' + param)
      filterService.setFilter(param);
  }
  
  
  
  app.controller('FeedCtrl', function($scope, articles, filterService, $timeout) {
  $scope.articles = articles;
  $scope.model = {
      value: ''
  };
  $scope.$on('changeFilter', function() {
      console.log(filterService.filterKey);
      $scope.model.value = filterService.filterKey
      }  
  }); 
  </code></pre>
  
  <p>});</p>
  
  <pre><code>&lt;div class="articles"&gt;
      &lt;div class="articleStub" ng-repeat="article in articles|filter:model.value"&gt;
  
          &lt;div ng-controller="CommentCtrl"&gt;
              &lt;div class="{{article.sort}}"&gt;
                  &lt;div class="leftBlock"&gt;
                      &lt;a href="#" ng-click="setSearchParam(article.sort)"&gt;
                          &lt;div class="typeIcon"&gt;
                              &lt;i ng-class="{'icon-comments':article.question, 'icon-star':article.create, 'icon-ok-sign':article.notype}"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  </code></pre>
  
  <p>Note: the FeedCtrl controller is called in the app.config $routeprovider function thing whatever its called</p>
  
  <p>Edited to add: the alert and console checks both work, so I'm assuming the issue is not in the filterService or CommentCtrl.</p>
  
  <p>Here's the Plnkr: <a href="http://plnkr.co/edit/bTit7m9b04ADwkzWHv88?p=preview" rel="nofollow">http://plnkr.co/edit/bTit7m9b04ADwkzWHv88?p=preview</a></p>