title: Angular accordion doesn't update UI when data source has been changed
body: <p>I start learning Angular and faced with some strange behaviour. </p>
  
  <p>I want to add a new header to accordion dynamically but I accordion doesn't reflect it on UI till I explicitly click on some of his items. By some reason he doesn't react on items changes before it starts load itserlf aggain durnig DOM rendering. </p>
  
  <pre><code>var mainApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngResource']);
  mainApp.factory('teamSharedObj',['$rootScope', function($rootScope) {
      return {
          teams: [],
          peopleInTeam: [],
          addNewTeam: function(item) {
              console.log("add new team: " + item);
              this.teams.push(item);
              $rootScope.$broadcast('team.new');
          },
          addTeamMembers: function(team, teamMembers) {
              for (var i = 0; i &lt; teamMembers.length; i++) {
                  var temp;
                  // put in team as key-value pair
                  temp[team] = teamMembers[i]
                  console.log("add new team member: " + temp);
                  peopleInTeam.push(temp);
              }
              if (teamMembers.length != 0) {
                  $rootScope.$broadcast('teamMember.new');
              }
          }
      }
  }]);
  
  mainApp.directive("addNewTeam", ['teamSharedObj', 'teamSharedObj', function (teamSharedObj) {
      return {
          restrict: 'A',
          link: function( scope, element, attrs ) {
              element.bind('click', function() {
                  console.log(scope.teamName)
                  teamSharedObj.addNewTeam(scope.teamName)
              });
          }
      }
  }])
  
  mainApp.controller('teamListCtrl', ['$scope', 'teamSharedObj', function($scope, teamSharedObj) {
      $scope.$on('team.new', function(event) {
              console.log('new team ' + event);
              $scope.items = teamSharedObj.teams;
          }
      );
      $scope.oneAtATime = true;
      $scope.items = ['new', 'another one'];//teamSharedObj.teams;
  }]);
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
      &lt;script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"&gt;&lt;/script&gt;
      &lt;script src="js/test.team.js"&gt;&lt;/script&gt;
  
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
  
  
  
  &lt;/head&gt;
  &lt;body ng-app="ui.bootstrap.demo"&gt;
  
      &lt;div id="teamBlock"&gt;
          &lt;input type="text" ng-model="teamName" &gt;
          &lt;input add-new-team type="submit" value="Add new team" &gt;
          &lt;!--&lt;button add-book-button&gt;Add data&lt;/button&gt;--&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          {{teamName}}
      &lt;/div&gt;
  
      &lt;div ng-controller="teamListCtrl"&gt;
          &lt;accordion close-others="oneAtATime" &gt;
              &lt;accordion-group heading="{{d}}" ng-repeat="d in items"&gt;
                  This content is straight in the template.
  
              &lt;/accordion-group&gt;
          &lt;/accordion&gt;
  
          &lt;div ng-repeat="item in items"&gt;{{item}}&lt;/div&gt;
      &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can you suggest me please a right way to notifu component about changes in its datasource? </p>