The ng-repeat works instantly, however, when data is changed programmatically, no changes occur on the html content.
HTML is as follows (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="main-app-ctrl">
<div ng-repeat="dt in data" ng-click="change_data();">
<h1 ng-bind="dt"></h1>
</div>
</div>
</body>
</html>
AngularJS code (main.js):
let app = angular.module('app', []);
app.run(function($rootScope, $window){
});
app.controller('main-app-ctrl', function($scope, $window){
$scope.data = [1, 2];
$scope.change_data = function()
{
$scope.data = [1, 2, 3, 4, 5];
};
});
I tried to use bind the data differently but still the data doesn’t change. The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="main-app-ctrl">
<div ng-repeat="dt in data" ng-click="change_data();">
<h1>{{ dt }}</h1>
</div>
</div>
</body>
</html>
And AngularJS code as follows:
let app = angular.module('app', []);
app.run(function($rootScope, $window){
});
app.controller('main-app-ctrl', function($scope, $window){
$scope.data = [1, 2];
$scope.change_data = function()
{
$scope.data = [1, 2, 3, 4, 5];
};
});