AngularJS + Material library - Error: [$parse:syntax]

Question

I can't seem to reconcile some drop down data when trying to use the directive from the AngularJS Material library. This is my first Angular project, and it's built on a MEAN stack no less

Here's my controller code:

(function () {
 'use strict';
  angular.module('myModule')
    .controller('mainCtrl', ['$scope', '$window', 'apiService',
      function mainCtrl($scope, $window, apiService) {
        $scope.mainInfo = {
          actionCodeList: []
          //More items below...
        }

        //Get Action Codes
        apiService.getDropdownData('actioncodes')
          .then(function(res) {
            $scope.mainInfo.actionCodeList = res;
            return $scope.mainInfo.actionCodeList;
        });
      }
    ]);

The idea is to declare an object that will hold all the relevant data for a series of dropdowns on a form. I've verified that data is coming back from the server in a structure like what you see below

Data:

0:{action_cd: "06", descr: "Account Code Change"}
1:{action_cd: "18", descr: "Account Code Change (Program)"}
//a few hundred more after this...

Finally, that data is being used in a particular template file like so (Note, I have a config file that is assigning this template to the correct controller, that's why I've omitted the ng-controller bit:)

HTML

<form name="userForm" class="col-md-12 row">
  <md-content md-theme="docs-light" layout-gt-sm="row" class="col-md-12 h-15" layout-padding>
    <md-input-container class="col-md-4 h-60">
      <label>Select an Action:</label>
      <md-select ng-model="actionCodeModel" >
        <md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="{{ actionCode.descr }}">
          {{ actionCode.descr }}
        </md-option>
      </md-select>
    </md-input-container>
  <md-content>
</form>

Here's the problem:

When I run this, the dropdown is populated fine, but my console is full of errors for every single item in it. For example:

Error: [$parse:syntax] Syntax Error: Token 'Code' is an unexpected token at 
column 9 of the expression [Account Code Change] starting at [Code Change].
http://errors.angularjs.org/1.6.8/$parse/syntax?p0=Code&p1=is%20an%20unexpected%20token&p2=9&p3=Account%20Code%20Change&p4=Code%20Change
at angular.js:116
at AST.throwError (angular.js:15349)
at AST.ast (angular.js:15099)
at Parser.getAst (angular.js:16458)
at Parser.parse (angular.js:16441)
at $parse (angular.js:16599)
at ChildScope.scopePrototype.$watch (hint.js:1449)
at Object.<anonymous> (angular-aria.js:142)
at angular.js:1383
at invokeLinkFn (angular.js:10610) "<md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="{{ actionCode.descr }}" tabindex="0" class="ng-scope" data-ng-animate="1">"

Additionally, selecting one of those options clears the value of the select.

Converting these to plain and tags clears the issue entirely, but I need to use material here. Does anyone know what I have missed?

Answer 1

There are two errors coming from your HTML code.

First, you forgot to close md-content tag.

The second one that causes your issue is that ngValue directive doesn't need interpolation brackets to match with your controller attribute.

ng-value="actionCode.descr" will be working.

<md-select ng-model="actionCodeModel">
  <md-option ng-repeat="actionCode in mainInfo.actionCodeList" ng-value="actionCode.descr">
      {{ actionCode.descr }}
  </md-option>
</md-select>

Working demo