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

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

Answer 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';
}

• Gerben Rampaart: Out of curiosity, do you know why his jquery change event doesn't fire? I can't really explain it.
• sylwester: Using Jquery inside the controller is considered as bad practice in Angular JS. That all I know :)
• user2872493: Thanks guys, I'll watch out when mixing the both of them!

Answer 2

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