Как исправить ошибку: [$ compile: nonassign] неназначаемое выражение

Question

Как исправить эту угловую компиляцию: ошибка неназначенного автозаполнения?

Попытка создать jsfiddle, но безуспешно.

Если у вас есть другое решение автозаполнения с дизайном материала, предоставьте его, пожалуйста.

Ошибка [$ compile: nonassign] https://docs.angularjs.org/error/$compile/nonassign?p0=ctrl.selectProduct(ctrl.selectedItem)&p1=mdSelectedItem&p2=mdAutocomplete в angular.js?

Вот мой код JS с угловым модулем и контроллером и импортированными деталями ng

angular.module('home', ['ui.bootstrap', 'ngSanitize', 'ngAria', 'ngAnimate', 'ngMaterial']);

angular.module('home').config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('green')
        .accentPalette('grey');
});

angular.module('home').controller('ctrl', ["$scope", function ($scope, $http) {
    var self = this;
    self.data = null;
    self.selectedItem = null;
    self.searchText = null;

    $scope.selectProduct = function (item) {
        $scope.orderItem.data.product = item;

        return item;
    }

    self.querySearch = function (query) {
        var request = new XMLHttpRequest();
        request.open('POST', apiUrl() + 'product/autoComplete?size=25', true);
        request.onload = function () {
            $scope.data = self.data = JSON.parse(request.responseText);
        };
        request.send(query);
    }

Вот мой HTML-код с угловыми скриптами и т. Д.

<script src="/angular-1.7.8/angular.min.js"></script>
<script src="/angular-1.7.8/angular-aria.min.js"></script>
<script src="/angular-1.7.8/angular-sanitize.min.js"></script>
<script src="/angular-1.7.8/angular-material.min.js"></script>
<script src="/angular-1.7.8/angular-animate.min.js"></script>
<link href="/angular-1.7.8/angular-material.min.css" rel="stylesheet">

<script src="/angular-1.7.8/ui-bootstrap-tpls.min.js"></script>
<link href="bootstrap-material-design.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha256-    CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link crossorigin="anonymous"     href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css    "
      rel="stylesheet">

<script src="js/application.js"></script>
<script src="order/order.js"></script>
<script src="report/profitability.js"></script>

<div ng-app="home">
<div ng-controller="ctrl">
<md-content class="md-padding">
  <form name="searchForm" ng-submit="$event.preventDefault()">
    <div layout-gt-sm="row">
      <md-input-container>
        <input type="text" ng-model="orderItem.data.product.id" placeholder="ID">
      </md-input-container>
      <md-autocomplete md-floating-label="Product" flex="" md-item-text="item.name" md-items="item in ctrl.data"
        md-search-text-change="ctrl.querySearch(ctrl.searchText)" md-search-text="ctrl.searchText"
        md-selected-item="ctrl.selectProduct(ctrl.selectedItem)" md-no-cache="ctrl.noCache" md-input-name="autocompleteField" required="">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
        </md-item-template>
        <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
        </div>
      </md-autocomplete>
    </div>
  </form>
</md-content>
    </div>
    </div>