Initialize select box with the retrieved id - angularjs

Question

I am new to angular js and I am trying to code an edit page which contains a select box. It has id as the value and name as the display label.
<select class="form-control" ng-model="item.user"
ng-options="user.id as user.loginName for user in Users" ng-disabled="true" >
<!-- ng-init="item.user=userId" -->
<option value="">Select User</option>
</select>
As I am adding edit page, I retrieve the values from server side and it returns the id for the select box. When I used ng-init to set the value (See the commented ng-init code), it displays only the Select User option. When I manually provide a user id like
ng-init="item.user=3"
The corresponding user is displayed correctly in the select box. I tried setting the value from controller as,
$scope.item.user = result.userid;
alert($scope.item.user);
The alert doesn't throw but when I alert result.userid above it, it works fine. What could be the problem?
EDIT 1:
Sample controller(controller.js):
function SampleController(Sample, $scope, $http,$compile, $filter, $modal, $timeout, DTOptionsBuilder, DTColumnBuilder,DTInstances) {
$scope.edit = function(id) {
//Retrieves value for dropdown
selectbox.userList(function(result) {
$scope.Users = result.content;
});
// alert("EDIT action initiated ID : " + id);
var params = {
id : id
};
$scope.sampleObj= Sample.view(params, function() {
$scope.$state.go('sampleEdit', {id:id});
});
}
}
state (config.js):
.state('admin.editSample', {
url: '/editSample/:id',
templateUrl: 'sample/editSample.html',
data: { pageTitle: 'Edit Sample'},
controller: SampleEditController
})
SampleEditController(controller.js):
var sampleEditController = function($stateParams, $scope, $http){
var params = {};
params.id = $stateParams.id;
var url = "sample/edit";
$http.get(url, {
params : params
}).success(function(result) {
alert("Users: " + $scope.Users); //Here it alerts undefined
for(var i = 0; i < $scope.Users.length && !$scope.item.user;i++){
if ($scope.Users[i].id === result.id) {
$scope.item.user = $scope.Users[i];
}
}
})
Edit 2:
SampleRepository
#Repository
public interface IUserRepository extends JpaRepository<Employee, Long>{
#Query("select new com.sample.application.model.dto.SampleInfo(c.id,e.fullName,"
+ "c.accountExpired,c.accountLocked,c.rowCreated,c.enabled,c.rowAltered, c.password, c.passwordExpired, c.loginName, c.languageFluency) "
+ " from Employee c left join c.person e order by c.id asc")
Page<IUserInfo> getList(Pageable pageable);
}
Edit 3:
services.js
.factory('sample', ['$http', function ($http) {
return {
userList : function(result){
$http.get('sample/list').success(result);
} }
I also tried this inside the controller,
userRoleEditController:
$http.get(url, {
params : params
}).success(function(res) {
selectbox.userList(function(result) {
$scope.User = result.content;
for(var i = 0; i < $scope.User.length; i++){
if ($scope.User[i].id === res.empId) {
$scope.item.user = $scope.User[i];
}
}
});
})
With this I am able to get $scope.User. I tried alerting $scope.item.user after $scope.item.user = $scope.User[i]; but it didn't work and i didn't get the value in the drop down box.

Answer 1

ng-init shouldn't be used to initilise as mentioned in the documentation. Instead to set the selected item set item.user in the controller.
To get the user with id as 3 you will need to loop through the users until you find the correct user. Once found set $scope.item.user to the user:
for (var i = 0; i < $scope.Users.length && !$scope.item.user; i++) {
if ($scope.Users[i].id === 3) {
$scope.item.user = $scope.Users[i];
}
}
Edit:
In your service return the promise from $http:
.factory('sample', ['$http', function ($http) {
return {
userList : function(){
return $http.get('sample/list');
}
}
}
Then in your controller where this is called you would do something like this to call this service method, handle the promise, set the users and the user on $scope:
sample.userlist().then(function (response) {
$scope.Users = response.data;
for (var i = 0; i < $scope.Users.length && !$scope.item.user; i++) {
if ($scope.Users[i].id === 3) {
$scope.item.user = $scope.Users[i];
}
}
});