AngularJS binding with JSON

Question

I have the following code:

//AngularJS JSON Fetch
var usrModule = angular.module("usrProfile",[])
usrModule.controller("usrController",function($scope,$http){
$http.get('bin/js/user_1.json').success(function(data){
$scope.users = data[0];

[...truncated code]
});

in the html i have <img src="{{users.profile_image}}" class="img img-responsive">.

Angular is loaded in the head.

The brackets are not updated by angular, as in they appear just as they are. I tried ng-bind on another DOM that was misbehaving and it returned blank.

The json is {"User":{[..truncated code..],"profile_image":"linkToImg.jpg"}}

What am I missing?

Also, is there a work around for combining Bootstrap and Angular? Bootstrap JS requires jQuery and is throwing that error, even though angular's website said it has some form of jquery in it.

Answer 1

if the brackets are shown in the browser, then angular or your userProfile does not load.

make sure you have:
* load your app with data-ng-app="usrProfile".
* load the data-ng-controller="usrController".
*load the java script file of your app after the angular core file.

If this are all done and you still have problems, please show us your html code.