Doesn't send the $scope to the html - ajax

Question

I started to work in Angular few days ago, and I have a problem that I don't know how to fix.
My website is calling a controller.js and this controller calls to an ajax function. The ajax function sent back a correct response, but I can't see it in the web. Here is the code:
var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
productInformation = function($scope) {
var something;
$.ajax({
type: "GET",
dataType : "json",
async : true,
url : "/ajax/reference/200-B2",
success : function(data) {
something = data.david;
alert(JSON.stringify(something));
$scope.helper = JSON.stringify(something);
},
complete : function($scope) {
$scope.helper = JSON.stringify(something);
alert($scope.helper);
}
});
};
}]);
This sent me a correct answer, but when I do this in the HTML I don't see the answer. (Even if the alert has all the info)
<div ng-controller="ResolveProduct">
<input ng-model="info"></input> information is: {{ $scope.helper }}
<input type="button" id="commitAction" class="slim-button" value="Resolve" onclick="productInformation('')"/>
</div>

Answer 1

You don't need to call $scope in the html side, so change {{$scope.helper}} to {{helper}}
<div ng-controller="ResolveProduct">
<input ng-model="info"></input> information is: {{ helper }}
<input type="button" id="commitAction" class="slim-button" value="Resolve" onclick="productInformation('')"/>
</div>
Update
You have passed empty values to the $scope from the onclick="productInformation('')" method. So the $scope values are cleared .
Please copy and past my code instead of your code.
Js code
var myApp = angular.module('myapp',[]);
myApp.controller('ResolveProduct', ['$scope', function($scope) {
$scope.productInformation = function()
{
var something;
$.ajax({
type: "GET",
dataType : "json",
async : true,
url : "/ajax/reference/200-B2",
success : function(data){
something = data.david;
alert(JSON.stringify(something));
$scope.helper = JSON.stringify(something);
},
complete : function($scope){
$scope.helper = JSON.stringify(something);
alert($scope.helper);
}
});
};
}]);
Html Code
<div ng-controller="ResolveProduct">
<input ng-model="info"></input> information is: {{ helper }}
<input type="button" id="commitAction" class="slim-button" value="Resolve" **ng-click="productInformation()"**/>
</div>
Also, I have changed onclick to ng-click in your button and assigned the function with $scope in your js side ( see the change productInformation to $scope.productInformation)

Answer 2

You should use {{ helper }} instead of {{ $scope.helper }}.
Also, after $scope.helper = JSON.stringify(something); you should add $scope.$apply().
You need to call $scope.$apply() because you are assigning a value to $scope.helper outside the digest loop (because you are using $.ajax from jQuery).
An explanation for the digest loop in angular can be found here: How do I use $scope.$watch and $scope.$apply in AngularJS?

Answer 3

Please check whether it works
<div ng-controller="ResolveProduct">
<input ng-model="info"></input> information is: {{helper }}
<input type="button" id="commitAction" class="slim-button" value="Resolve" onclick="productInformation('')"/>
</div>
You can't use $scope here
Refer this for help:
http://www.bennadel.com/blog/2457-accessing-scope-on-the-dom-using-angularjs.htm