Я хочу показать список фильмов и добавить новый фильм, добавив его в массив.

Файл html:

<!-- FOREACH the movies -->
<div ng-controller="homeController" ng-repeat="movie in movies | orderBy : order">
    <div class="movie-wrapper">
        <h1>{{movie.name}}</h1>
        <p>IMDB: <a href="{{movie.imdb_url}}" target="_blank">IMDB</a></p>
    </div>
</div>

<!-- ADD a new movie to the array -->
<div ng-controller="homeController">

   <h3>Add new movie:</h3>
   <form name="movieForm" ng-submit="addMovie(movieInfo)">
      <div class="form-group new-movie">
           <label for="Title">Title:</label>
           <input type="text" class="form-control" name="title" ng-model="movieInfo.title">
       </div>
       <div class="form-group new-movie">
           <label for="IMDB">IMDB:</label>
           <input type="text" class="form-control" name="imdb" ng-model="movieInfo.imdb">
       </div>

       <button type="submit" class="btn btn-primary">Add movie</button>
   </form>
</div>

Файл javascript:

var app = angular.module('movie-app', ["ngRoute"]);
app.controller("homeController", function($scope) {
   $scope.movies = getMovies();

   // Method to add a new movie
   $scope.addMovie = function(movieInfo) {
      $scope.movies.push({
         name : movieInfo.title,
         imdb_url: movieInfo.imdb
       });

      console.log("Movie added");
   }
});

function getMovies() {
   return [{
      name: 'Inception',
      imdb_url: 'http://www.imdb.com/title/tt1375666/'
   }];
}

После нажатия кнопки отправки на консоли я не получил сообщение об ошибке, но каким-то образом пользовательский интерфейс не обновляется.

Я думаю, что каким-то образом контроллер не получает ссылку/привязку к тому же элементу массива или dom, когда я нажимаю новую запись.