Can someone help me figure out why I am unable to display JSON values on my modal using AngularJS? I can see the values in the console or alert message, but they won't show up on the modal dialog. Thank you in advance for any assistance.
Checkout my Plnkr.
This is the HTML:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TestCtrl">
<button ng-click="test()">Test</button>
</div>
</body>
</html>
This is the script.js:
angular.module('myApp', ['ui.bootstrap']);
function TestCtrl($scope, $dialog, $http){
$scope.test = function(){
$http.get('test.json')
.success(function(data) {
$dialog.dialog({}).open('test.html');
$scope.items=data;
console.log(data);
alert(JSON.stringify(data));
});
}
}
This is test.html:
<div class="modal-header">
<h1>Test Modal</h1>
</div>'
<div class="modal-body">
Test Data:
<ul ng-repeat="item in items">
<li>
{{item.test1}}
{{item.test2}}
{{item.test3}}
</li>
</ul>
</div>
This is test.json:
[{
"test1": "test1value",
"test2": "10",
"test3": "100"
}]