title: Using video.js in angular.js directive
body: <p>This directive is supposed to watch for changes in the scope.tutorialNumber variable (which increases as the user progresses through tutorials) and then load the new video by using tutorialNumber as an index on the array videoURLs, which then replace the first one which is hardcoded into the html. However the $watch doesn't seem to get triggered at all when tutorialNumber is updated. Why?</p>
  
  <pre><code>&lt;video data-setup="{'techOrder': ['html5', 'flash']}"  class="video-js vjs-default-skin" id="myvideo" video-loader="tutorialNumber" id="video" controls&gt;
      &lt;source type="video/mp4" src="file:///C:/Users/Dell/Desktop/grammar%20game/ㅗㅏregular.mp4"&gt;&lt;/source&gt; 
      Your browser does not support the video tag.
  &lt;/video&gt;
  
  .directive('videoLoader', function(){
      return function (scope, element, attrs){
              scope.$watch(scope.tutorialNumber, function(){          
                  //element.load();           
                  scope.video.src(scope.videoURLs[scope.tutorialNumber]);
                  scope.video.ready(function(){
                  scope.video.play();
                  $(scope.video).bind('ended', function(){
                      $(scope.video).unbind('ended');
                      if (!scope.video.ended) {
                          return;
                      }
                      scope.tutorialNumber++;
                      scope.$apply();
                      scope.loadFromMenu();
                  });
              });
          });
      }
  });
  </code></pre>