Doesn't send the $scope to the html

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>

score 1 · Accepted Answer · edited Aug 23 '16 at 15:15

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)

Thanks @Ramesh!!! that was very usefull, the only missing thing is what @Cosmin said that you need to do a $scope.$apply() — David_Garcia, Apr 10 '15 at 12:24

score 1 · Answer 2 · edited May 23 '17 at 12:15

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?

score 0 · Answer 3 · answered Apr 10 '15 at 11:22

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

Doesn't send the $scope to the html

3 Answers3

Update