title: AngularJS ng-click and video play pause
body: <p>I have a video tag.</p>
  
  <pre><code>&lt;video id="video1" poster="{{video.poster}}" ng-click="video.playIt()" controls&gt;
      &lt;source src="source.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I want to be able to click my video's poster or the controls to start the video.
  Then be able to pause and play the video by the video's controls or clicking anywhere inside the video element.</p>
  
  <p>Here is my app.js...</p>
  
  <pre><code>$scope.video.playIt = function() {
    if (jQuery("#video1").get(0).paused) {jQuery("#video1").get(0).play();}
    else {jQuery("#video1").get(0).pause();}
  }
  </code></pre>
  
  <p>At the moment I can start the video by clicking on the poster, and pause / play it by clicking on the video's element. However the controls do not work.</p>
  
  <p>I think there may be a conflict with ng-click. I have added one but I think the video may have one already attached which is why there is a conflict.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks</p>