I cannot figure out why data binding is not working on a select tag, as the docs specifies.

This is my select element:

<select id="start-type" ng-model="startType">
  <option value="day-of-week">Day of the week</option>
  <option value="month">Month</option>
  <option value="month-day">Day and month</option>
  <option value="year">Year</option>
  <option value="year-month">Month and year</option>
  <option value="local-time" selected>Time</option>
  <option value="local-date">Date</option>
  <option value="local-date-time">Date and time</option>
</select>
<label for="start-type">Start type</label>

The issue is that whenever an item is selected the $scope.startType model is never changed. It's always blank.

I have tried defining $scope.startType in my controller but I don't see why that would change anything because it should work as it already is. And of course, it didn't help.

I have gone through several working examples, but I can't see what I am missing here.

Edit: I figured out what's happening. The CSS framework I am using didn't have Angular in mind at all. It is rendering a custom view for a select using its own divs and layout, while hiding the actual select element. But they didn't even hook the select action into the hidden select, so the angular directives or data binding are never being triggered... Any clue on how I could put it all together?

I cannot figure out why data binding is not working on a select tag, as the docs specifies.

This is my select element:

<select id="start-type" ng-model="startType">
  <option value="day-of-week">Day of the week</option>
  <option value="month">Month</option>
  <option value="month-day">Day and month</option>
  <option value="year">Year</option>
  <option value="year-month">Month and year</option>
  <option value="local-time" selected>Time</option>
  <option value="local-date">Date</option>
  <option value="local-date-time">Date and time</option>
</select>
<label for="start-type">Start type</label>

The issue is that whenever an item is selected the $scope.startType model is never changed. It's always blank.

I have tried defining $scope.startType in my controller but I don't see why that would change anything because it should work as it already is. And of course, it didn't help.

I have gone through several working examples, but I can't see what I am missing here.

Edit: I figured out what's happening. The CSS framework I am using didn't have Angular in mind at all. It is rendering a custom view for a select using its own divs and layout, while hiding the actual select element. But they didn't even hook the select action into the hidden select, so the angular directives or data binding are never being triggered... Any clue on how I could put it all together?

• javascript
• angularjs

Share Improve this question Follow edited Jul 14, 2016 at 17:02 dabadaba asked Jul 14, 2016 at 16:35 dabadabadabadaba 9,5422121 gold badges9595 silver badges170170 bronze badges 2

• "so the angular directives or data binding are never being triggered... Any clue on how I could put it all together?" - this needs to be asked as a separate question – jusopi Commented Jul 14, 2016 at 18:12
• @jusopi yeah I know, I found out about the actual issue after creating this question. – dabadaba Commented Jul 14, 2016 at 18:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

In order to bind to a pre selected value on the select's ng-model, you need to use ng-options instead.

<select id="start-type" 
        ng-model="startType" 
        ng-options="type.value as type.label for type in startTypes">

Where startTypes is defined on your controller:

$scope.startTypes = [{value:'day-of-week', label:'Day of Week'}, ...]

edit

Per @John S's ment below, you might want to add a default/blank option when the $scope.startType == undefined so that the UI renders correctly.

<option ng-selected="true" value="">select a market vertical</option>

source = Why does AngularJS include an empty option in select?

I would use ng-model, and ng-change. Ng-change would be evaluated whenever the selected value is changed.

I can see it working. Check out the snippet below

• Make sure you have the controller and the app declared correctly
• Also use try using ng-options and have the values e from the controller like in this example.

angular.module('demo', []).controller('DemoController', function($scope) {
  $scope.logModelValue = function() {
    console.log($scope.startType);
  };
});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demo">
  <div ng-controller="DemoController">
    <label for="start-type">Start type</label>
    <select id="start-type" ng-model="startType" ng-change="logModelValue()">
      <option value="day-of-week">Day of the week</option>
      <option value="month">Month</option>
      <option value="month-day">Day and month</option>
      <option value="year">Year</option>
      <option value="year-month">Month and year</option>
      <option value="local-time" selected>Time</option>
      <option value="local-date">Date</option>
      <option value="local-date-time">Date and time</option>
    </select>
    <span>{{startType}}</span>
    <button ng-click="logModelValue()">Console log model value</button>
  </div>
</body>

EDIT
Looks like the trouble is with getting materializecss and angular working together. You could either write your own angular wrappers over materializecss or use this library angular-materialize