Trouble setting a service variable in AngularJS

Question

This is my first project in AngularJS and it's something I've been wanting to try out for a while now. I'm using the Foundation Apps Framework (which is built on Angular), and I've been having some trouble setting a service variable.

The idea is for the service variable to store the "now playing" tracklist for the app's player (which uses the Videogular plugin), I guess in a similar way to a shopping basket.

I'm having no trouble getting the "now playing" tracklist, but I just can't seem to set the tracklist with test data (using a simple button with ng-click="setTracklist() for testing purposes)

I would be really grateful for any suggestions. If it seems like a pretty straightforward problem I apologise, this is a big learning curve for me.

Service (app.js)

(function() {
  'use strict';

  angular.module
    .service('nowPlaying', function($sce) {

    var tracklist = [{"info": [{"title": "Lies (Tourist Remix)","artist": "CHRVCHES","artwork": "https://i1.sndcdn.com/artworks-000062986758-w3vnj1-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/kislacansu/chvrches-lies-tourist-remix","order": "0"}],"sources":[{"src":$sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/120555166/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type":"audio/mpeg"}]},{"info": [{"title": "Midnight (Jon Hopkins Remix)","artist": "Coldplay","artwork": "http://geo-media.beatport.com/image_size/500x500/9453088.jpg","service": "Dropbox","url": "http://dropbox.com","order": "1"}],"sources": [{"src": $sce.trustAsResourceUrl('https://www.dropbox.com/s/hmmrarbb6jry2id/04%20Midnight%20%28Jon%20Hopkins%20Remix%29.mp3?dl=1'),"type": "audio/mpeg"}]},{"info": [{"title": "Lovers in Japan","artist": "Coldplay","artwork": null,"service": "YouTube","url": "https://www.youtube.com/watch?v=G7miUwfuWLU","order": "2"}],"sources": [{"src": "https://www.youtube.com/watch?v=0c4tjuw3NWg","type": "video/mp4"}]},{"info": [{"title": "All We'll Know","artist": "The Hics","artwork": "https://i1.sndcdn.com/artworks-000078234891-3ua2os-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/the-hics/all-well-know","order": "3"}],"sources": [{"src": $sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/147550599/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type": "audio/mpeg"}]}];

    this.setTracklist = function(){
        tracklist = [{"info": [{"title": "All We'll Know","artist": "The Hics","artwork": "https://i1.sndcdn.com/artworks-000078234891-3ua2os-t500x500.jpg","service": "SoundCloud","url": "https://soundcloud.com/the-hics/all-well-know","order": "3"}],"sources": [{"src": $sce.trustAsResourceUrl('http://api.soundcloud.com/tracks/147550599/stream?client_id=b49f9732e4efc7dc0e497012d17b2695'),"type": "audio/mpeg"}]}];
        console.log("something else");

        console.log(tracklist);
        return tracklist;
    }

    this.getTracklist = function() {
        return tracklist;
    };

 })
  ;

})();

Controller (app.js)

angular.module('application')
.controller('indexCtrl', indexCtrl)
;
indexCtrl.$inject = ['$scope', '$stateParams', '$state', '$controller', '$http', '$sce', '$timeout', 'nowPlaying'];
function indexCtrl($scope, $stateParams, $state, $controller, $http, $sce, $timeout, nowPlaying) {

//Other Videogular code has been edited out...

//Controller videos gets service tracklist
controller.videos = nowPlaying.getTracklist();

controller.config = {
    preload: "auto",
    autoHide: false,
    autoHideTime: 3000,
    autoPlay: true,
    sources: controller.videos[0].sources,
    load: false,
    transclude: true,
    controls: undefined,
    theme: {
        url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
    },
    plugins: {
        poster: controller.posters
    }
};

controller.setVideo = function(index) {
    controller.API.stop();
    controller.currentVideo = index;
    controller.config.sources = controller.videos[index].sources;
    $timeout(controller.API.play.bind(controller.API), 100);
    };      
}

Answer 1

Don't use this keyword because function context changes the this value. Do instead something like this:

var _this = this;
_this.setTracklist = function(){}

Also, you can't call a service function from your html page with ng-click, you need to call a function in the controller.

controller.setTracklist = function() {
   nowPlaying.setTracklist();
}