Popcorn.js not working in Angular.js

Question

I tried to add a simple test for popcorn.js in my angular project and nothing.

I am using ui-router. I'm referencing popcorn.js cdn in my index.html

I added the following to one of my views:

<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>

<script>
  // Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");


// add a footnote at 2 seconds
pop.footnote({
      start: 2,
      end: 6,
      text: "This footnote is the stepping stone of progress!",
      target: "footnote-container"
    });

// play the video right away
pop.play();

</script>

Which is the exact popcorn.js example they use.

When I view the project I get the video, but none of the pop!

Any help would be great.

Thinking there must be something better for angular...

UPDATED: My angular setup is really simple. No need to display my index, as it is simply referencing the cdn for Popcorn.js and all other angular code is working fine. What I've displayed above is the code I have in the "view" = .

My app.js:

'use strict';

/**
 * @ngdoc overview
 * @name clientApp
 * @description
 * # clientApp
 *
 * Main module of the application.
 */
angular
  .module('clientApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ui.router',
    'ngSanitize',
    'ngTouch'
  ])
  .config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('main');

    $stateProvider
    .state('/', {
      url:'/main',
      templateUrl:'views/main.html'
    });

  }]);

The associated view simply configs the ui-router and does nothing in the controller.

'use strict';

angular.module('clientApp')
.config(function($stateProvider){
  $stateProvider
  .state('video', {
    url:'/video',
    templateUrl:'views/video.html',
    controller:'VideoController as video'
  })
})
.controller('VideoController', function(){

})

Answer 1

Are you not missing this:

<div id="footnote-container"></div>,

just after the video tags.

Though not the issue, as per docs (the 101 video):

1. The video tags go inside the body.
2. The scripts go inside head as explained in the video.

Just follow the video.