Angular View не обновляется после смены модели

Question

У меня есть 2 мода, которые используют один и тот же контроллер. Надо:

    <div id="addToPlaylist" ng-controller="PlaylistModalCtrl">
                    <select name="playlist" ng-model="playlist" ng-options="playlist.id as playlist.name|rmExt for playlist in playlists">
                    </select>

Другой имеет:

<div id="newPlaylist" ng-controller="PlaylistModalCtrl">
<button ng-click="createPlaylist(playlistName);">Save</button>

В моем контроллере у меня есть:

angular.module('MyApp')
  .controller('PlaylistModalCtrl', function ($scope) {
    $scope.playlists = [];

    $scope.updatePlaylists = function() {
      getPlaylist.then(function (response) {
        $scope.playlists = response.data.data;
        $scope.$$phase || $scope.$apply();
      });      
    }

    $scope.createPlaylist = function(playlist_name) {
      addPlaylist(playlist_name).then(function(response) {
        $("#newPlaylist").modal('hide');
      });
    }

    $scope.updatePlaylists();
  });

Так что можно ожидать, что мой первый просмотр будет иметь обновленные "плейлисты" в выпадающем списке, но это не так. Так как же я могу обновить это представление?

Answer 1

Вы, кажется, не понимаете, как работает обзор. Вот plunkr, иллюстрирующий, что два разных контроллера имеют разные области видимости и прочее.

http://plnkr.co/edit/LqLuLvVkE9ltzcJH6XdN?p=preview

Как вы можете ясно видеть, ожидание, что два контроллера обновят одну и ту же переменную, не будет работать, потому что каждый из них имеет переменную в своей отдельной изолированной области видимости. Чтобы бороться с этим, вы можете внедрить службу pubsub, которая прослушивает некоторые изменения для некоторых свойств, использовать угловые функции emit и broadcast, или, что самое лучшее, переосмыслить, почему вам понадобится один и тот же контроллер дважды в вашем приложении, и перепроектировать его.