title: Angular.js createElement is not creating element
body: <p>I'm doing a simple tutorial and cannot get past a very simple thing.</p>
  
  <p>I want to create an element on page load.  I've followed the code exactly.  I'm using Google Chrome.  What is wrong with the following that will not create the audio element?:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="myApp"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div ng-controller="PlayerController"&gt;
          &lt;button ng-click="play()" class="button" ng-show="!playing"&gt;Play&lt;/button&gt;
          &lt;button ng-click="stop()" class="button alert" ng-show="playing"&gt;Stop&lt;/button&gt;
          Playing audio: &lt;b&gt;{{ playing }}&lt;/b&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>main.js (in the referenced location js/main.js)</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('PlayerController', ['$scope', function($scope) {
    $scope.playing = false;
    $scope.div = document.createElement("div");
    $scope.audio = document.createElement('audio');
    $scope.audio.src = 'media/sample_mpeg4.mp4';
  }]);
  </code></pre>
  
  <p>This is what the source looks like upon page inspection:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="myApp"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div ng-controller="PlayerController"&gt;
          &lt;button ng-click="play()" class="button" ng-show="!playing"&gt;Play&lt;/button&gt;
          &lt;button ng-click="stop()" class="button alert" ng-show="playing"&gt;Stop&lt;/button&gt;
          Playing audio: &lt;b&gt;{{ playing }}&lt;/b&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see the audio element is not created.  I tried this with even simpler examples where I tried to just add a div.</p>
  
  <p>Thanks</p>