How can I overcome race conditions within directives without a timeout function?

Question

I'm trying my hand at creating a directive. Things simply weren't working so I simplified things until I found this basic race condition issue causing problems for me. In my directive's controller I need to do some checks like... ``` if ($scope.test.someValue === true) { $scope.test.anotherValue += 1; } ``` Here's my basic directive with some logs to illustrate how this issue manifests. ``` app.directive('myDirective', function () { return { restrict: 'E', replace: true, scope: { test: '=' }, template: '

{{ test | json }}

', controller: function ($scope, $timeout) { // this logs undefined console.log($scope.test); // this logs the scope bound 'test' object $timeout(function() { console.log($scope.test); }, 300); } }; }); ``` What is the correct way to work with this race condition? I'm worried that in the real world this timeout function is going to work or fail based on how long an api call takes.

Accepted Answer

Remember that at the "link" phase (when you assign your controller), the `$scope.test` variable has not been assigned yet - hence the `undefined`

The `$timeout(fn, timeout)` is a way to execute something which will affect something in the $scope. You can set your $timeout() value to 0 and it will still work. The reason for this is because the $timeout(...) function will be deferred till after the current `$digest()` cycle.

References: $timeout() $digest()

Additionally, if you want to watch for changes in a particular value you can do:

```
$scope.$watch("test.somevalue", function(new_val, old_val) {
    console.log("somevalue changed!! - increment othervalue");
    $scope.othervalue += 1;
});
```

How can I overcome race conditions within directives without a timeout function?

Solution

Problem