title: Calling AngularJS controller function when html5 video ends
body: <p>I have a video on the homepage of my app which plays when I launch it. When the video ends I'd then like to use some CSS 3 transitions to move the page around.</p>
  
  <pre><code>&lt;ion-view  hide-back-button="true" title=""&gt;
      &lt;ion-pane&gt;
          &lt;div class="home-video"&gt;
              &lt;video autoplay="autoplay" ng-click="ctrl.video()" aria-label="video of IBM logo" tabindex="-1" aria-hidden="true" poster="images/Hero_Final_Placeholder.gif" onended="ctrl.video()"&gt;
                  &lt;source src="videos/video.mp4" type="video/mp4"&gt;
                  &lt;img src="images/video_backup.gif" title="Your browser does not support the video tag."&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/ion-pane&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>At the end of the video I'd like to be able to call an angularJS Controller function.</p>
  
  <pre><code>'use strict';
  
  angular.module('app', ['ionic']).config(function ($stateProvider, $urlRouterProvider) {
  
  $stateProvider.state('home', {
    url: "/home",
    templateUrl: 'views/home.html',
    controller: 'homeCtrl as ctrl'
  }).state('project', {
    url: "/project/:projectId",
    templateUrl: 'views/project.html',
    controller: 'projectCtrl'
  });
  
   // Default view to show
  $urlRouterProvider.when('', '/home');
  
  }).run(function ($http, pouchDB, replicationService, $rootScope) {
  
    replicationService.replicate();
  
  });
  </code></pre>
  
  <p>My controller looks like:</p>
  
  <pre><code>'use strict';
  
  var app = angular.module('app', false);
  
  app.controller('homeCtrl', function ($rootScope){
  
  this.data = {};
  
  var ctrl = this;
  
      this.video = function () {
  
          console.log("video done");
  
      }
  
  });
  </code></pre>
  
  <p>If I put a <code>console.log()</code> in the <code>&lt;video onended=""&gt;</code> element it prints it out. If I try and call <code>ctrl.video()</code> which contains the same console.log I get the following error:</p>
  
  <p><code>Uncaught ReferenceError: ctrl is not defined</code></p>
  
  <p>I know that ctrl is defined because if I add an <code>ng-click="ctrl.video()"</code> and I click the video player it prints out.</p>