I am working on an Angular app where I am retrieving data from a service in the following manner:
angular.module('jsonService', ['ngResource'])
.factory('MyService',function($http) {
return {
getItems: function(profileid,callback) {
$http.get('/api/myapp/'+profileid+'/').success(callback);
}
};
});
Here is my controller in app.js:
var app = angular.module('myapp', ['ui.bootstrap', 'jsonService']);
app.controller('mycontroller', function(MyService, $scope, $modal, $log, $http) {
$scope.profileid=3619;
MyService.getItems($scope.profileid,function(data){
$scope.profiledata = data;
});
});
The JSON object retrieved in the 'data' variable has the following structure:
[
{
"profile_id": 3619,
"student_id": "554940",
"first_name": "Samuel",
"last_name": "Haynes"
}
]
However, when trying to display these values in a textbox using ng-bind, instead of the actual value, I see [object Object]. This is how I am attempting to bind the student ID in the HTML:
<label for="sid">Student ID</label>
<input type="text" class="form-control" ng-model="profiledata" ng-bind="{{profiledata.student_id}}" />
How can I properly display the values from the JSON object?