title: Directive does not get updated when new records are added
body: <p>I've created a simple directive that shows all the movies in my movies scope</p>
  
  <pre><code>app
    .directive('movieOverview', function () {
      return {
        template: '&lt;div ng-repeat="movie in movies"&gt;Name: {{movie.title}}&lt;/div&gt;',
        controller: 'searchCtrl',
      };
    });
  </code></pre>
  
  <p>But when I add my directive to my <code>application.html.erb</code> it doesn't get updated when a new record is added to the movie scope. I have to refresh the page to see the new records.</p>
  
  <p>I thought directives could be used outside of scopes etc.</p>
  
  <p>This is the addMovie function from my searchCtrl (which I use with the directive).</p>
  
  <pre><code>  $scope.addMovie = function() {
  
      'http://api.themoviedb.org/3/movie/206647?api_key=a8f7039633f2065942cd8a28d7cadad4&amp;append_to_response=releases'
      // Search for release dates using the ID.
      var base = 'http://api.themoviedb.org/3/movie/';
      var movieID = $(event.currentTarget).parent().find('.movieID').text()
      var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&amp;query='
      var append_to_response = '&amp;append_to_response=releases'
      var callback = 'JSON_CALLBACK'; // provided by angular.js
      var url = base + movieID + '?api_key=' + apiKey + append_to_response + '&amp;callback=' + callback;
  
      $http.jsonp(url,{ cache: true}).
        success(function(data, status, headers, config) {
  
          if (status == 200) {
  
            $scope.movieListID = data;
            console.log($scope.movieListID);
  
            var releaseNL;
  
            for (var i = 0; i &lt; $scope.movieListID.releases.countries.length; i++) {
              var release = $scope.movieListID.releases.countries[i];
              if (release['iso_3166_1'] == 'NL') {
                  releaseNL = release;
              }
            }
  
            if(typeof releaseNL === 'undefined'){
              // With release date
  
              Notification($scope.movieListID.original_title + ' is toegevoegd, maar heeft nog geen Nederlandse premiere datum.');
  
              createMovie.create({
                title:          $scope.movieListID.original_title,
                release_date:   $scope.movieListID.release_date,
                image:          $scope.movieListID.poster_path,
                movie_id:       $scope.movieListID.id
              }).then(init);
  
            } else {
              Notification.success($scope.movieListID.original_title + ' is toegevoegd.');
  
              createMovie.create({
                title:          $scope.movieListID.original_title,
                release_date:   releaseNL.release_date,
                image:          $scope.movieListID.poster_path,
                movie_id:       $scope.movieListID.id
              }).then(init);
            };
  </code></pre>
  
  <p>Important to see here is the <code>.then(init);</code> </p>
  
  <pre><code>var init = function(){
  
      movieService.loadMovies().then(function(response) {
        $scope.movies = response.data;
      });
  
    }
    init();
  </code></pre>
  
  <p>I add a movie and then do the init function which fires a service called loadMovies</p>
  
  <pre><code>.factory('movieService', ['$http', function($http) {
    return {
      loadMovies: function() {
        return $http.get('/movies.json');
      }
    };
  }])
  </code></pre>
  
  <p>Which requests the new movies and then updates the view.</p>