Within the internal view, I am dynamically rendering HTML using ng-include and ng-if directives.
<div ng-controller="myController">
<div ng-if="myProperty == 1">
<div ng-include="'view1.html'"></div>
</div>
<div ng-if="myProperty == 2">
<div ng-include="'view2.html'"></div>
</div>
</div>
Within the controller, I have a $scope.myProperty which receives a value from another JavaScript object through $scope injection. The controller also contains a callback function that updates $scope.myProperty every few seconds.
app.controller('myController', function ($scope) {
...
$scope.myProperty = 0; //initial value
function callback() {
$scope.$apply(); // force view update
console.log($scope.myProperty); // log the updated value of myProperty
}
var otherJsObject = new myObject($scope, callback);
otherJsObject.work();
...
}
The callback function successfully updates the myProperty value, but it does not reflect the changes in the view every time.
Update: $scope.bindUIProp = { a: $scope.myProperty};
function callback() {
$scope.$apply();
$scope.bindUIProp.a = $scope.myProperty;
console.log('Callback ' + $scope.myProperty);
console.log('drawstage ' + $scope.bindUIProp.a);
}
var otherJsObject = new myObject($scope, callback);
otherJsObject.work();
Within the view, I have utilized the object property
<div ng-controller="myController">
<div ng-if="bindUIProp.a == 1">
<div ng-include="'view1.html'"></div>
</div>
<div ng-if="bindUIProp.a == 2">
<div ng-include="'view2.html'"></div>
</div>
</div>
This approach works consistently when the page is refreshed. However, the partial view does not update from view1 to view2 when the scope.bindUIProp.a is changed to 2.