title: AngularJS: Video disable autoplay and preload not working
body: <p>NOTE: Strictly Angular solutions please. No jquery. Default video controls will not work for our scenario. </p>
  
  <p>Scenario:
  Click a play button, then LOAD and PLAY the video. 
  Should not preload the video unless a button is clicked. </p>
  
  <p>But, it is both preloading and autoplaying without button click. What am I missing in fiddle?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app ng-controller="videoCtrl"&gt;
   &lt;video preload="preload" autoplay="autoplay"&gt;
      &lt;source src="http://www.w3schools.com/html/mov_bbb.mp4"&gt;
    &lt;/video&gt;
    &lt;button ng-click="playVideo($event)"&gt;PLAY&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>ANGULAR</p>
  
  <pre><code>function videoCtrl($scope) {
      $scope.autoplay = false;
    $scope.preload = "none";
  
    $scope.playVideo = function () {
      console.log("hello");
      $scope.autoplay = true;
      $scope.preload = "auto";
    }
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
    position:relative;
    width:300px;
    height:150px;
  }
  button {
    position:absolute;
    top:50px;
    left:120px;
  
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/nkarri/nd9utkbp/1/" rel="nofollow">https://jsfiddle.net/nkarri/nd9utkbp/1/</a></p>
  
  <p>Thanks in Advance.</p>