0

I have an angular view that correctly binds to its corresponding data in the scope when data is added. When trying to remove or update this data, it is not binding to the view. Here are the functions that are being triggered:

the view is bound to two pieces of data: $scope.music_stream.currently_playing_track & $scope.music_stream.queued_tracks.

so initially when a user adds a video, this function is called and is correctly displayed in the view. 

    /**
     * Create an object representing the data needed for the currently playing track
     * @param {Number} id
     * @param {String} thumbnail
     * @param {String} title
     * @param {String} added_by
     * @param {String} track_duration
     */
    $scope.createPlayingTrack = function(id, thumbnail, title, added_by, track_duration) {
        var currently_playing_track_object = {
            id : id,
            thumbnail : thumbnail,
            title : title,
            added_by : added_by,
            vote_value : 0,
            track_duration : '',
            elapsed_time : '0:00'
        };

        $scope.music_stream.currently_playing_track = currently_playing_track_object;
        $scope.play($scope.music_stream.currently_playing_track.id);

        currently_playing_track.track_duration = player.getDuration();
    }

later on when this video ends, this function is called 

    /**
     * Triggered when the player reaches the end of a video
     */
    $scope.loadNextVideo = function() {
        if(!jQuery.isEmptyObject($scope.music_stream.queued_tracks[0])) { // if something is in the queue
            next_video = $scope.music_stream.queued_tracks.shift();
            $scope.createPlayingTrack(next_video.id, '/assets/album_cover1.jpg', next_video.title, 'ah', '3:00')
        }
    }

when you console.log($scope.music_stream.queued_tracks) after the shift(), [] is returned (which is what I want), but this is not carried over to the view.

The more confusing part... when createPlayingTrack() is called again, the data in $scope.music_stream.currently_playing_track is correct (and this function correctly binded data to the view during its first call) ... but the view is not being updated with this call.

Alek Hurst
  • 4,527
  • 5
  • 19
  • 24
  • 1
    I believe that [this answer](http://stackoverflow.com/a/12305082/2055998) applies in your case as well. Also see [AngularJS and scope.$apply](http://jimhoskins.com/2012/12/17/angularjs-and-apply.html) for more on *updating bindings*. – PM 77-1 Sep 22 '14 at 21:54
  • 1
    Have you tried `$scope.$apply()`? – TheSharpieOne Sep 22 '14 at 21:54
  • didn't know i needed to $scope.apply() in the controller itself. Checking it out now! – Alek Hurst Sep 22 '14 at 21:56
  • Yep, that worked, thanks guys! I posted these as an answer and will mark it as correct when I'm allowed to. – Alek Hurst Sep 22 '14 at 22:01

1 Answers1

0

PM 77-1 and TheSharpieOne caught my amateur mistake. $scope.$apply must be called to update data in the view.

Alek Hurst
  • 4,527
  • 5
  • 19
  • 24