We Keep Coding

Not able to bind angularjs controller variable to html page

I have a simple query which i am not able to understand why it doesnt work for me.
I have a ajax call and i get data from backend. Here it is.
$.ajax({
type: "GET",
url: serviceURL,
}).then(function (response) {
$scope.$apply(function () {
$scope.username = response.FirstName;
});
console.log($scope.username);
});
I am able to get the console output here. Means ajax works fine. Now i need to display it at the front end. Here is the code for that.
<li ng-model="username">[USERNAME should comeHere]</li>
I have used ng-model to bind the controller side data to front end. So the username should display in between the [] brackets i mentioned above. However, this is not happening.
Can someone tell me what is it tat i am doing wrong. ? I have also used $apply because i read somewhere that this will force it to make the updated changes.

It should be:
<li>{{username}}</li>
This may help to shed light on this: What's the difference between ng-model and ng-bind

How to pass nested parameters using angular

I am trying to send a get request to my rails backend using angular. So what am looking for is the request like this
Parameters: {"location"=>"london", "q"=>{"price_gteq":"33333", "price_lteq":"7777"}}
So in my app.js I tried below code to send the request with the parameters. I am now getting unexpected / and the second nested parameter is not showing aswell as seen below.
$http({
url: "/search.json",
method: "GET",
params: {location: $scope.searchLocation, q: {price_gteq: $scope.min_price, price_lteq: $scope.max_price} }
})
This is what i get when I try like above
Parameters: {"location"=>"london", "q"=>"{\"price_gteq\":\"33333\"}"}
Could someone tell me what am doing wrong here??

By default angular uses $httpParamSerializer which actually can handle nested parameters. Check if your $http uses this service. If for some reason it doesn't work, you can write own paramSerializer and pass it into $http configuration object.
Also check if price_lteq present at the moment, when you send request.

Problems getting data using AngularJS

I'm just learning Angular JS.
I'm trying to populate the scope variable with the result of an ajax database call.
The ajax call returns a propper json object(an array) but I cannot get $scope.contentType to output on my HTML page.
Can anyone see any reason this should not work?
app.controller('MainController', ['$scope', function($scope){
var allMyData;
$scope.title = 'Content Types List';
var request = $.ajax({
type: "POST",
dataType: "json",
url: "/angularJS/dbServices.cfc?method=getContentTypes"
})
request.done(function(data){
allMyData = data.DATA;
console.log(allMyData);
$scope.contentTypes = allMyData;
})
request.fail(function(){
console.log('fail');
})
}])

The reason your $scope isn't updating on the view is because you are changing that value outside the $digest cycle. You need to use AngularJS' built-in $http service.
You can get more information/documentation in the link above.

It is because you are using jQuery ajax which is not triggering angular digest. You can fix it with:
request.done(function(data){
$scope.apply(function() {
allMyData = data.DATA;
console.log(allMyData);
$scope.contentTypes = allMyData;
})
})
However, this is not the best practice. Instead you should 1) use $http service as mentioned in other answer 2) Move the entire logic to a separate service 3) use a high-level interface provided by ngResource

Query user roles in loopbacks angular sdk

I want to get all roles applied to one user using strongloops angular sdk.
I got it worked with the GET request /users/{id}/roles in my strongloop explorer and it works very well. But I can't figure out how to trigger this request in the angular SDK. I created the lb-services.js file and I it has a prototyped function what seems to intended for exactly this request.
"prototype$__get__roles": {
isArray: true,
url: urlBase + "/users/:id/roles",
method: "GET"
},
However I havn't found how to use this function in controller.
Update: it's working calling:
User.prototype$__get__roles({id:"1"});
but isn't it according to this supposed to called like getRoles() ?

Missing fields in $http response

I have an app that at some point issues an $http POST to a WEB API project as follows
$http({
method: update ? "PUT" : "POST",
url: framewidth + "inspections",
data: data,
}).then(
function (object) {
toastr.success(Messages.success.dflt);
console.log(object.data);
rtrn.resolve(object);
},
function (error) {
toastr.error(Messages.Error(error.statusText));
rtrn.reject(error);
}
);
It saves fine but after it returns object.data is missing some fields. I have traced the missing fields all the way from the depths of the database to the Fiddler layer and the missing fields are there up until the success function of $http
So I can actually see my missing fields being returned in fiddler but they seem to disappear somewhere between that and console.log(object.data); line above.
I am totally stumped. It seems it's disappearing in the layer that's outside my control.

Put a breakpoint in your success function and look at object there. One thing I've noticed about Chrome's dev tools is that if you console.log an object and then the object changes before you expand it, you might get the changed version rather than what it was at the time of getting logged.