AngularJS case-insensitive binding to a dynamic select dropdown without changing the ng-bind value to lower or upper case

Question

I am trying to perform a case-insensitive bind of an ng-model to a dynamic select drop-down using AngularJS.

by going through various other relavent answers from stack over flow, i have come up with something like below on the view , here caseinsensitive-options is an directive which i have come up with referencing the following solution

AngularJS case-insensitive binding to a static select drop-down

HTML:

<select id="dcName" caseinsensitive-options="" ng-model="DC.name" class="form-control">
  <option value="">--- Please Select ---</option>
  <option ng-repeat="dataCenter in inventoryDataCenters" value="{{dataCenter}}">{{dataCenter}}</option>
</select>

js directive code :

app.directive('caseinsensitiveOptions', function() {
    return {
        restrict: 'A',
        require: ['ngModel', 'select'],
        link: function(scope, el, attrs, ctrls) {
          var ngModel = ctrls[0];
          ngModel.$formatters.push(function(value) {
            var option = [].filter.call(el.children(), function(option) {
              return option.value.toUpperCase() === value.toUpperCase()
            })[0];
            return option ? option.value : value
          });

        }
      }
    });

The expected result is

when i pass something like this for $scope.inventoryDataCenters = ["TEST1","test2",teST3]; and ng-model for DC.name has value TesT1.

The drop down should show TEST1 by doing case insensitive binding. That doesnt happen now. The above solution works perfect when we have static drop down.

things to be considered is that the select is inside a div which ng-repeat as shown below

ng-repeat="DC in workflowData.project_data.service_info.variables.service_data['data-center']" 

and ng-model for select DC.name is derived from the above array DC.

Answer 1

check this URL for binding based on case insensitive value

https://jsfiddle.net/dwd2du17/6/

 <div ng-app="module" ng-controller="controller as ctrl">
 <select id="animal" ng-model="ctrl.animal">
  <option value="">--- Select ---</option>
  <option value="CaT">Cat</option>
  <option value="DOg">Dog</option>
 </select>
 {{ctrl.animal}}
 </div>


 var appForm = angular.module('module', [])
 .controller('controller', function($scope) {
 });