Changing HTML of an element dynamically through a directive - angularjs

Question

I'm trying to change the HTML of an element based on a variable that is passed as an attribute of a directive.
The content is supposed to be changing back to the 'This is the original content...'. How come it doesn't work?
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<div data-loading-data='{{testObj}}'>
<p> This is the original content. changingVar is '{{testObj.changingVar}}'</p>
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.testObj = {};
$scope.testObj.changingVar = false;
$timeout(function() {
console.log("time out is done ! the original content should be restored now (from somewhere inside the directive!)");
$scope.testObj.changingVar = true;
}, 5000);
});
app.directive('loadingData', function() {
return {
restrict: 'AE',
replace: 'false',
link: function(scope, elem, attrs) {
var originalHTML = elem[0].innerHTML;
elem.replaceWith("<p>This is modified content</p>");
// When testObj.changingVar will be true, I want the original content (which is stored in var 'originalHTML') to be set!
// How to do?
// ........................................... ?
// ........................................... ?
}
}
});
First answer was useful; sorry, I accidently saved the jsfiddle with some commented out parts. Updated now!
There was an answer which suggested using objects is useful (passed by reference) instead of passing a single variable (passed by value) - that was great to know.
I updated the jsFiddle again to illustrate what I am trying to do better:
https://jsfiddle.net/4xbLrg5e/6/

Answer 1

First things you are passing testObj means you don't want to use inherited scope with directive.
So,I am assuming you want to use isolated scope.
As per this,
Here is the changes,
HTML :
<div test-data='testObj'>
<p> This is the original content. changingVar is '{{testObj.changingVar}}'</p>
</div>
Directive JS :
There are some correction,
1. replace : false; // implicitly it is false and not 'false';
2. You should not replace directive with html until unless you dont want to refer it again.
You can put watch to properties of passed object if you want update the html as per data changes.
You should use isolated scope with directive as per above assumption.
This is nothing but passed by reference using =
app.directive('loadingData', function() {
return {
restrict: 'AE',
replace: false,
scope : {testData:'=testData'},
link: function(scope, elem, attrs) {
var originalHTML = elem[0].innerHTML;
elem.html("<p>This is modified content</p>");
scope.$watch(function(){
return scope.testData.changingVar;
},function(nVal){
console.log('1')
elem.html("<p>Here is the original content</p>");
})
}
}
});
Here is the updated fiddle