Scope variable not binding in AngularJS

Question

one of my within scope variables is remaining at 'all'. I am console logging to check if I get the right value and it comes out to ,Steps, Walkthrough, Ref when I select different options, but the type variable remains at all as if I'm not actually changing it with the last line.

here is my html:

<div class="inputs">
    <select class="filters">
        <option ng-model="type" name="Steps" value="all">All<br/>
        <option ng-model="type" name="Steps" value="Steps">Steps<br/>
        <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough<br/>
        <option ng-model="type" name="Steps" value="Ref">Ref<br/>
    </select>
    {{type}}
</div>

And Controller:

$('.filters').change(function() {
    console.log($('option:selected', this).attr('value'));
    $scope.type = $('option:selected', this).attr('value');
});

Attached is a fiddle, but I don't think I got the libraries right or something. in the fiddle where It shows {{type}} as the ouput, that is actually 'all' and never changes. Thanks so much

Working Fiddle

Your fiddle isn't setup right, jsfiddle.net/jTu93/3

elclanrs
– elclanrs

2014-07-09 22:35:22 +00:00
Commented Jul 9, 2014 at 22:35 — elclanrs
– elclanrs, Commented Jul 9, 2014 at 22:35

sylwester · Accepted Answer · 2014-07-09 22:59:23Z

1

You don't have to mix jQuery with AngularJS:

Jsfiddle

<div ng-app="MdApp">
    <div ng-controller="MdCtrl">
        <select class="filters" ng-model="type">
         <option ng-model="type" name="Steps" value="all">All</option>
            <option ng-model="type" name="Steps" value="Steps">Steps</option>
            <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough</option>
            <option ng-model="type" name="Steps" value="Ref">Ref</option>
        </select>
        {{type}}
    </div>
</div>  

var app = angular.module('MdApp',[]);
function MdCtrl($scope, $attrs) {

    $scope.type = 'all';


}

edited Jul 9, 2014 at 22:59

answered Jul 9, 2014 at 22:45

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

3 Comments

Gerben Rampaart Over a year ago

Out of curiosity, do you know why his jquery change event doesn't fire? I can't really explain it.

sylwester Over a year ago

Using Jquery inside the controller is considered as bad practice in Angular JS. That all I know :)

user2872493 Over a year ago

Thanks guys, I'll watch out when mixing the both of them!

Gerben Rampaart · Accepted Answer · 2014-07-09 22:59:34Z

0

This works for me:

<div ng-app="MdApp">
    <div ng-controller="MdCtrl">
        <select class="filters" ng-model="type">
         <option ng-model="type" name="Steps" value="all">All</option>
            <option ng-model="type" name="Steps" value="Steps">Steps</option>
            <option ng-model="type" name="Steps" value="Walkthrough">Walkthrough</option>
            <option ng-model="type" name="Steps" value="Ref">Ref</option>
        </select>
        {{type}}
    </div>
</div> 


var app = angular.module('MdApp',[])
    .controller('MdCtrl', function($scope, $attrs) {

    $scope.type = 'all';
});

fiddle

answered Jul 9, 2014 at 22:59

Gerben Rampaart

9,9653 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

Scope variable not binding in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related