AngularJs - Directive - Elements are with the curly braces - angularjs

Question

I have created the directive with the isolated scope.
In view, I am using controller as property.
When I call the directive with the ng repeat and the isolated scope, the elements are with the curly braces. Not updating the element with the model value.
When I debug the directive, I am getting the same curly braces.
<ul id="ul-data-repeat" my-directive>
<li title='test'>
<span>{{homeCtrl.ngRepeatDatasource.name}}</span>
</li>
<li ng-repeat='item in homeCtrl.ngRepeatDatasource.values'>
{{item.name}}
</li>
</ul>
Just for the sample I have added this code. This is the logic.
In my actual scenario, I will call the jquery plugin.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('homeController',function($scope){
var vm=this;
vm.data={
name:'Name'
, values:[{val:'values1'},{val:'values2'}]
}
}).directive('myDirective',['$injector',function($injector){
return{
scope: {
data:'=data'
},
link: function ($scope, $element, $attributes) {
debugger
$($element).html($($attributes.myDirective).html());
}
}
}]);
</script>
<div ng-app='myApp'>
<div ng-controller='homeController as homeCtrl'>
<div>
<h1>Without directive</h1>
<div id='data'>
{{homeCtrl.data.name}}
<div ng-repeat='item in homeCtrl.data.values'>
{{item.val}}
</div>
</div>
</div>
<div>
<h1>With directive</h1>
<div my-directive='#data'>
</div>
</div>
</div>
</div>
how to get the updated value?

Answer 1

If you are using scope you can send your data to directive. And you want to use your data without braces you need to compile it with your current scope. This means you need to send your scope to directive again.
1. Data Send
<div my-directive='item'>
</div>
link: function ($scope, $element, $attributes) {
console.log($scope);
}
2. Compile data
<div my-directive='item'>
</div>
link: function ($scope, $element, $attributes) {
$compile($($attributes.myDirective).html())($scope);
}
3. Bind data before run directive
<div ng-bind="item.val" id="#data" myDirective="#data">
</div>
data:'#',
link: function ($scope, $element, $attributes) {
$($element).html($($attributes.myDirective).html());
}