angularjs ng-click can't change $scope variable?

Question

I'm baffled here I've got a controller which looks like this..

angular.module('publicRegApp')
  .controller('CompanyNameController', function ($scope) {
    $scope.title = 'Title One';

    $scope.onSearch = function(){
        console.log("clicked");
        $scope.title = "Title Two";
    }

  });

in my template I have:

<button type="submit" class="btn btn-default" ng-click="onSearch()">Search</button>

When I click the button the console log gets fired but the $scope.title doesn't change. I'm so confused please help :-(

where is the title injected in your view? how do you conclude it does not change? — Eliran Malka
– Eliran Malka, Commented Mar 4, 2014 at 12:31
Check your title by wrapping it like <div ng-controller="CompanyNameController">{{title}}</div> — BKM
– BKM, Commented Mar 4, 2014 at 12:37
The {{title}} is contained within a view, I am assigning View and Controller via the modules config $routeProvider - {{title}} gets set fine when I load up the page but just won't change when I click? — user1803975
– user1803975, Commented Mar 4, 2014 at 12:41

user13500 · Accepted Answer · 2014-03-05 01:57:01Z

3

It works if you take care of these things:

Make sure you have ng-app="publicRegApp" somewhere
Correct you Javascript from angular.module("publicRegApp") to angular.module("publicRegApp", []) which indicate that you don't depended on other angular module.
Make sure {{title}} is in the controller scope

Here is working example: http://jsbin.com/xotaf/5/edit

edited Mar 5, 2014 at 1:57

user13500

3,8642 gold badges29 silver badges34 bronze badges

answered Mar 5, 2014 at 1:35

ustc-geeker

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maurycy · Accepted Answer · 2014-03-04 12:44:27Z

1

My guess is that your {{title}} in template is outside of scope for controller. I would strongly recommend to check it ;)

$scope.$apply is very bad suggestion, it's not doing what you think it's doing

------------EDIT---------

check this plunker pls

http://plnkr.co/edit/0LyUaGWK4J5c9EY74ndw?p=preview

edited Mar 4, 2014 at 12:44

answered Mar 4, 2014 at 12:35

maurycy

8,4201 gold badge30 silver badges44 bronze badges

4 Comments

Ramesh Rajendran Over a year ago

My guess is that your {{title}} in template is outside of scope for controller. I would strongly recommend to check it Then how to first time it working?

user1803975 Over a year ago

Hey thanks for reply, I'm not sure how {{title}} could be out of scope as it gets set to 'Title One'. The problem is it won't update to 'Title Two'?

BKM Over a year ago

@user1803975 Have you tried this <div ng-controller="CompanyNameController">{{title}}</div>

maurycy Over a year ago

I've edited post with plunker, it seems to work, please check it out

user1803975 · Accepted Answer · 2014-03-04 13:21:21Z

1

Not totally sure why but having

<button type="submit">

was the issue. Changing to

<button type="button">

fixed it.

I then realised I should probably be using ng-submit on the buttons's parent element which also fixed the problem (as long as I leave the button as submit of course)

answered Mar 4, 2014 at 13:21

user1803975

3551 gold badge5 silver badges16 bronze badges

1 Comment

Cyrus Zei Over a year ago

eaither you choose <input type="button"> or <button></button>

Collectives™ on Stack Overflow

angularjs ng-click can't change $scope variable?

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related