AngularJS ng-repeat not working after adding Angular 17 web components in index.html

Question

<select ng-if="!isOtherRemarkSelected"
    class="form-control m-1" ng-model="selectedRemark.value"
    ng-change="handleRemarks()">
    <option value="">Select Remarks</option>
    <option ng-repeat="obj in remarks track by $index"
      ng-value="{{obj}}" ng-bind-html="getRemarks(obj)">
    </option>
</select>

The above code is working fine but after adding Angular 17 web components javascript files in index.html getting below error on select the remarks

Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object]] starting at [Object]].

Answer 1

Here is a working example for your reference, as you can see there is no need for ng-bind-html since it is required for inserting html, even then you can achieve the same html logic with hardcoding the html along with string interpolation.

Since you have not provided the data, I am unable to replicate the issue you have asked in the question!

function Channels($scope) {
  $scope.isOtherRemarkSelected = false;
  $scope.remarks = [{
      label: 'Test1', id: 1
    },
    {
      label: 'Test18', id: 18
    },
    {
      label: 'Test25', id: 25
    },
  ];
  $scope.selectedRemark = {
    value: '',
  };
  
  $scope.getRemarks = (remark) =>  {
  return remark.label;  
  }
  $scope.handleRemarks = () => {console.log('handleRemarks');};
}

angular.module('app', [])
  .controller('Channels', Channels);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Channels">
  <select ng-if="!isOtherRemarkSelected" class="form-control m-1" ng-model="selectedRemark.value" ng-change="handleRemarks()">
    <option value="">Select Remarks</option>
    <option ng-repeat="obj in remarks track by $index" ng-value="{{obj}}">
      {{getRemarks(obj)}}
    </option>
  </select>

</div>