title: How to mock DOM element in Jasmine such that the controller can access it?
body: <p>I am trying to mock a DOM element in my jasmine test suite</p>
  
  <pre><code>     it('Test changing radio', function () {
          testElement = angular.element("&lt;div&gt;&lt;input class='my_radio' type='radio' /&gt;&lt;/div&gt;");
          testElement.find('input')[0].checked = true;
          var scope = $rootScope.$new();
          $compile(testElement)(scope);
          scope.$digest();
  
          console.log(testElement.find('input')[0].checked); // should print true
          myController.changeRadio();
          console.log(testElement.find('input')[0].checked); // should print false
  
      }); 
  </code></pre>
  
  <p>In my controller</p>
  
  <pre><code>function changeRadio(){
      for(var i = 0; i &lt; angular.element('.testElement').length; i++){
          angular.element('testElement')[i].checked = false;
      }
  }
  </code></pre>
  
  <p>The console log should return the following</p>
  
  <pre><code>true
  false
  </code></pre>
  
  <p>Since <code>myController.changeRadio</code> changes radio button from true to false, I verified that when running my app it works, however the jasmine test suite did not work. I found out that the controller couldn't find the input element at all. Is there a way to pass in <code>$compiled</code> DOM to the controller during testing?</p>