AngularJS ngIf prevents finding element
HTML
<script src="http://code.angularjs.org/1.2.7/angular.js"></script>
<column column="{title: 'Test'}"></column>
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('column', function () {
return {
template: '<div class="column"><div>{{ column.title }}</div><button ng-click="toggleEditing()">Toggle</button><form name="columnForm" role="form" ng-if="editing"><select></select></form></div>',
restrict: 'E',
scope: {
column: '='
},
controller: ['$scope', '$element', '$timeout', function ($scope, $element, $timeout) {
$scope.editing = false;
$scope.toggleEditing = function () {
$scope.editing = !$scope.editing;
$timeout(function() {
var select = $element.find('select');
select.append('<option>Value 1</option>')
.append('<option>Value 2</option>')
.append('<option>Value 3</option>');
});
};
}]
};
});