Angularjs - Scope value is not applied in template - angularjs

Question

I have used the directive scope in directive template.
I have tried to get the html from template cache which was stored earlier.
But the current directive scope is not applied to the directive. I don't what will be the reason.
I have tried to compile the template and get the value. But not applied.
contentString = $templateCache.get('template/MyTemplate')
var div = document.createElement("div");
div = angular.element(div).html(contentString);
var s = $compile(div.contents())($scope);
template/MyTemplate would be following
<div>
{{obj.value}}
</div>
Directive scope like following,
link: function ($scope, $element, $attributes) {
$scope.obj.value="This is my test"
}
I got the output like
<div class="ng-scope">
{{obj.value}}
</div>
What will be the issue?

Answer 1

Check this example which is using a custom directive with an isolated scope. I hope the below examples will be of help to you.
angular
.module('demo', [])
.directive('hello', hello);
hello.$inject = ['$templateCache', '$compile'];
function hello($templateCache, $compile) {
var directive = {
scope: {
},
link: linkFunc
};
return directive;
function linkFunc(scope, element, attrs, ngModelCtrl) {
scope.obj = {
value: 'Hello, World!'
};
var template = $templateCache.get('templateId.html');
element.html(template);
$compile(element.contents())(scope);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
<hello></hello>
<script type="text/ng-template" id="templateId.html">
<div>
{{obj.value}}
</div>
</script>
</div>
Another example using controller aliasing syntax i.e. controller as with a directive to be consistent with using controller as with view and controller pairings
angular
.module('demo', [])
.controller('DefaultController', DefaultController)
.directive('hello', hello);
function DefaultController() {
var vm = this;
vm.message = 'Hello, World!';
}
hello.$inject = ['$templateCache', '$compile'];
function hello($templateCache, $compile) {
var directive = {
link: linkFunc,
scope: {
message: '='
},
controller: HelloController,
controllerAs: 'vm',
bindToController: true
};
return directive;
function linkFunc(scope, element, attrs, ngModelCtrl) {
var template = $templateCache.get('templateId.html');
element.html(template);
$compile(element.contents())(scope);
}
}
function HelloController() {
var vm = this;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<hello message="ctrl.message"></hello>
<script type="text/ng-template" id="templateId.html">
<p>{{vm.message}}</p>
</script>
</div>
</div>