title: AngularJS - ng-bind-html-unsafe and ng-model Problems
body: <p>I have the following line in my html:</p>
  
  <p><code>&lt;div ng-bind-html-unsafe="departmentConfig" class="control-group"&gt;&lt;/div&gt;</code></p>
  
  <p>and I use a <code>$resource</code> get to retrieve the HTML, assign the HTML to <code>$scope.departmentConfig</code>, and then the view is updated perfectly.  The HTML that is assigned to <code>$scope.departmentConfig</code> contains form elements, with <code>ng-model</code> attributes in it, but when I change the values in these input elements, they don't update the <code>$scope</code> model at all.  </p>
  
  <p>This is what I have tried, based on a lot of other internet posts, and it isn't working:</p>
  
  <pre><code>$resource('resources/sources/departments/:mappedName', {
          mappedName:departmentKey
      }).get(function(departmentConfig) {
          // This will call another function that will build a chunk of HTML
          $scope.departmentConfig = $scope.buildDepartmentConfigHtml(departmentConfig);
          // This is my feeble attempt to access the element, and bootstrap it to include the items in the $scope model.
          var $departmentConfigContainer = $('#departmentConfig');
          angular.bootstrap($departmentConfigContainer, ['sourcemanager']);
  </code></pre>
  
  <p>I have even seen some jsFiddle examples where this appears to be working, but mine isn't.  Am I calling bootstrap too soon?  I also tried putting a <code>$watch</code> on <code>$scope.departmentConfig</code> like this:</p>
  
  <pre><code>$scope.$watch('departmentConfig', function() {
      var $departmentConfigContainer = $('#departmentConfig');
      angular.bootstrap($departmentConfigContainer);
  });
  </code></pre>
  
  <p>but it didn't work either.  I bet there is an easy explanation to this, I just can't seem to get the input elements with <code>ng-model</code> that are loaded after page compile to get bound to the model.  Any help is appreciated, this is the last piece of functionality I need to get working on my page.  Let me know if you need more information about my configuration as well.</p>
  
  <p>So, simply put, how can I force a section of the DOM to recompile after I know it has been loaded?</p>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>Here is a jsfiddle outlining what I would like to do: <a href="http://jsfiddle.net/j_snyder/ctyfg/">http://jsfiddle.net/j_snyder/ctyfg/</a>.  You will notice that property two and three don't update the model, and I am calling bootstrap on the outer div, hoping that will include those in the model binding.  This is the first time I have posted to jsfiddle, please let me know if you can't see the example.</p>