title: Function not defined error for a function that's defined inside an angularjs controller
body: <p>I've looked through other "function is not defined" questions, but can't seem to find one that's applicable to my use case. I'm using angular.js.</p>
  
  <p>I have an initially empty div, #mylist that I am populating dynamically in the js. I have a function defined inside a controller that I'm assigning to <code>onChange</code> event of a checkbox. </p>
  
  <p>Here is the full doc:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html data-ng-app="testapp"&gt;
  &lt;head&gt;
      &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var app = angular.module("testapp", []);        
          app.controller("MyAppController", function ($scope) {
              createCheckbox();
  
              function doSomething() {
                  alert("hello!");
              }
  
              function createCheckbox() {
                  $("#mylist").html("&lt;input type='checkbox' onChange='javascript:doSomething();' /&gt;");
              }       
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body data-ng-controller="MyAppController"&gt;
      &lt;div id="mylist"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When run, clicking on the checkbox results in the function not defined error.</p>
  
  <p>What am I missing here? Thanks.</p>