Angular: How to force recompile directive?

Question

HTML: ```

``` Problem: I have page-turn built in for the large amount of `obj`s. Which means that the value of `arr`, representing the current page of `obj`s, will change. However, the `obj` in the `status-stored-in="obj"` part is not refreshed with the change. Right now my solution is to add a `ng-if` in `customDirective`, flickering its value back and forth to have it force recompiled. Is there any other equivalent, neater way to deal with this? Edit: The start of the custom directive: ``` module.directive 'checkbox', (checkboxHooks) -> restrict: 'E' scope: hook: '=' hookedTo: '=' statusStoredIn: '=' templateUrl: 'templates/checkbox.html' link: (scope, element, attr) -> ``` The gist is that it needs to get hold of an object, for storing the `checked` status. The whole of it can be found here: [coffee/js].

Accepted Answer

Inside your directives link function you need to watch `status-stored-in` for changes and then recompile it e.g.:

```
   link: function(scope, element) {
    scope.$watch('statusStoredIn', function() {
      element.html(statusStoredIn);
      $compile(element.contents())(scope);
    });
   }  
```

Angular: How to force recompile directive?

Solution

Problem