Using ng-if to check angular variable from another directive in angularjs

I wish did fix the issue. Have a look at this fiddle . Basically, you just $compile any html that you want and append it to the new position.
Here is an updated plunk with that working. If you put in a pre inside the text area with hljs it should work fine.

I hope this helps you . First of all, if you plan to re-use , then you should create an isolated scope:

code :

---

.directive("foo", function(){
   return {
      restrict: "E",
      scope: {
         data: "="
      },
      template: "<div><label>Enter foo: </label><input ng-model='data'/></div>"
   }
});

app.controller("MainCtrl", function($scope)){
  $scope.fooModels = [];
  $scope.addFoo = function(){
      $scope.fooModels.push(new FooModel());
  };
}

<div ng-repeat="fooModel in fooModels">
  <foo data="fooModel.data"></foo>
</div>
<button ng-click="addFoo()">Add Foo</button>

I wish this helpful for you I'm not sure exactly why you can't just have a single directive, however something like the following might work. Instead of repeating the parent directive you just pass in the models and have that directive repeat and create each of the child directives.

I think the issue was by ths following , You have correctly guessed it! This is happening because of child scopes created by ng-repeat.
When you are creating a isolated scope with bar dependency the set operation on bar is setting the bar value on parent scope. In case of ng-repeat the parent scope is the ng-repeat scope and hence this behaviour.

like below fixes the issue You're mixing two methods here. In your controller, you're putting things on the controller instance. Which will work fine, as long as you specify bindToController: true in your directive definition. This is considered best practice now anyways, for several reasons.
The problem in your link function is that you're expecting a variable to be on the scope, but it isn't. It's on the controller, which is on the scope. You. However, the forth injectable of the link function is the directives controller, so you can access it like so: