AngularJS - controller executes before controller has been loaded

Question

Angular automatically puts form elements on the scope: $scope[formName] , for example.

It appears my controller is running before this form has been established on the scope ( $scope[formName] is undefined).

Form is not present immediately, yet once you click the button, it is present: http://plnkr.co/edit/q3RJLfWWcZhm9Y6oQjy3?p=preview

Is there an event to listen to, or some way to wait until the form has loaded?

Would

$scope.$watch(formName, ...)

work?

Answer 1

You can use $timeout to allow the digest cycle to perform and then gain reference to your form on the scope:

$timeout(function(){
  $scope.doIt();
}, 0);

But note that you'll need to inject $timeout into your controller:

controller('ctrl1', function($scope, $timeout){

Update here is a working plnkr

Answer 2

Yes, it seems $scope.$watch will work:

Not sure if this is the "Angular Way". Any other suggestions?