Angular JS does not reflect changes in $scope object of controller

Question

I have seen some questions similar to this one, but I cannot resolve my issue. I have angular controller:

app.controller('MyFormCtrl', function($scope, Item) {

    $scope.searchResult = {value: 'Test'};

    $scope.search = function() {
        console.log($scope.searchResult);
        $scope.searchResult.value = "Clicked";
    }
}

And html template:

<div ng-controller="MyFormCtrl">
  <p>{{searchResult.value}}</p>
  <p align="center"><a href="#" ng-click="search()">Search</a></p>
</div>

And I cannot force it to reflect changes that are made in controller. At load I see default values of variables: 'Test' and 'Test name'. But when I click register button new values are assinged to variables in controller, but no changes at html page. I suppose there is some problem with scopes. I'm new at angularjs and SO cannot help me, so I suppose it is time for some special help on my particular case.

Update 1. Item - is a resource to rest api, it works and I see result in firebug during debugging, but it does not matter. Even if I delete this line, nevertheless searchResult does not update. But in JS console after 1st click I see value 'Test' (it is correct), on second click I see in cosole value 'Clicked', which means that new value were assinged, I see the same during debug in firebug, but on html page I still see value 'Test'. I have tried to do $scope.$apply() - it does not help. The most closest case that I managed to find are this question: changing a controller scope variable in a directive is not reflected in controller function, but here I see more complex logic.

Update 2. There are a lot of answers, which were confused with Item call. I have deleted Items call, and make code as simple as it possible. It still does not reflect changes of variable searchResult.

Update 3. There is no issue, I have started from simple example and get working result, seems like and introduced some error in initial project during.

If Item.search() errors out, $scope.searchResult.value = "Clicked"; is never reached. Have you tried removing that line? — jperezov
– jperezov, Commented Dec 8, 2015 at 21:49
You will probably need to clarify your question a bit more. Specifically, what the Item.search() function does. There isn't anything obvious about the code that you have posted here that would explain why it's not functioning. — Claies
– Claies, Commented Dec 8, 2015 at 21:49
Does Item.search() return a different array of objects? Because if it is not returning anything then $scope.searchItems won't update from the click event. — BuddhistBeast
– BuddhistBeast, Commented Dec 8, 2015 at 22:25
I have created plunker for above code.Its working for me.plnkr.co/edit/c3uAyEVPUJ1A12iVl0U6?p=preview — RIYAJ KHAN
– RIYAJ KHAN, Commented Dec 10, 2015 at 9:22

Keval Bhatt · Accepted Answer · 2015-12-09 09:12:29Z

t is Working you are using Item params in controller remove it and see it works and if you are using angular new one then use angular module

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" >
  <div ng-controller="myFormCtrl">
  <p>{{searchResult.value}}</p>
  <p align="center"><a href="#" ng-click="search()">Search</a></p>
</div>
  </div>

<script>
  var myApp = angular.module("myApp", []);
myApp.controller('myFormCtrl', function($scope) {

    $scope.searchResult = {value: 'Test'};

    $scope.search = function() {
        console.log($scope.searchResult);
        $scope.searchResult.value = "Clicked";
    }
})
  </script>

anthumchris · Accepted Answer · 2015-12-08 22:13:19Z

0

The AngularJS documentation has an example for this. Start there and incrementally introduce your Item.search() function

https://docs.angularjs.org/api/ng/filter/filter

answered Dec 8, 2015 at 22:13

anthumchris

9,2502 gold badges35 silver badges60 bronze badges

1 Comment

sphinks Over a year ago

Not sure how filter could help me? Could you please explain a little more detailed.

Collectives™ on Stack Overflow

Angular JS does not reflect changes in $scope object of controller

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related