Angular View not updating from a model change

Question

I have 2 modals that use the same controller. One has:

    <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>

The other has:

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

In my controller, I have:

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();
  });

So one would expect that my first view would have an updated "playlists" in the dropdown, but this isn't the case. So how can I get that view to be updated?

In html I see ng-model="playlist", but in js I see $scope.playlists, typo? — Ye Liu
– Ye Liu, Commented Oct 1, 2013 at 13:37
getPl is a Service call to get the latest playlist. @YeLiu, I updated my code to reflect playlists — Shamoon
– Shamoon, Commented Oct 1, 2013 at 13:39
Show how you use $scope.updatePlaylists and $scope.createPlaylist — Ye Liu
– Ye Liu, Commented Oct 1, 2013 at 13:43

Nikola Yovchev · Accepted Answer · 2013-10-01 14:18:09Z

1

You don't seem to understand how scoping works. Here is a plunkr illustrating that two different controllers have different scopes and stuff.

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

As you can clearly see, expecting two controllers to update the same variable would not work because each of them has the variable in its own isolated scope. What you can do to battle that is to implement a pubsub service that listens to some changes for some properties, use emit and broadcast angular functions, or, the best, rethink why you would need the same controller twice in your app and redesign it.

answered Oct 1, 2013 at 14:18

Nikola Yovchev

10.4k4 gold badges50 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular View not updating from a model change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related