How to mock DOM element in Jasmine such that the controller can access it?
<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>