Plangular

Console.md

Getting the following Console error:

http://api.soundcloud.com/resolve.json?callback=angular.callbacks._0&client_id=0d33361983f16d2527b01fbf6408b7d7&url=soundcloudURL

I'm guessing it's because the directive is running before the Firebase call retuns the URL... so how do I reload the plangular directive? Or defer loading the directive until I have the SoundClour URL because the URL will be different for each room.

room.html

<div class="table" ng-if="urlIsLoaded" // added this to defer loading
  plangular="{{ soundcloudURL }}"> // must use curly braces too
  <div class="table-cell">
    <button class="button-icon" ng-click="playPause()">
      <svg ng-if="player.playing != track" plangular-icon="play"></svg>
      <svg ng-if="player.playing == track" plangular-icon="pause"></svg>
    </button>
  </div>
  <div class="table-cell px2 full-width">
    <h3 class="m0">{{ user.username }}</h3>
    <p>{{ title }}</p>
    <progress value="{{ currentTime / duration || 0 }}"
      ng-click="seek($event)">
      {{ currentTime / duration }}
    </progress>
    <small>{{ currentTime | prettyTime }} | {{ duration | prettyTime }}</small>
  </div>
</div>

RoomCtrl.js

/* global Firebase */
(function(angular) {
  'use strict';

  angular.module('tunesApp')
    .controller('RoomCtrl', function(
      $scope,
      $rootScope,
      $routeParams,
      $timeout,
      $location,
      $firebase,
      FBURL
      ) {

      var roomRef = new Firebase(FBURL).child('rooms/' + $routeParams.id);
      
      $scope.urlIsLoaded = false;
      
      // Working now and wrap in $timeout to update scope immediately.
      roomRef.once('value', function(snapshot) {
        var val = snapshot.val();
        $timeout(function() {
          $scope.soundcloudURL = val.url;
          $scope.urlIsLoaded = true;
        });
      });

    });

})(window.angular);

Nice, that worked... I'll update the above code to reflect.