Run a function to check the index on each change of the select option…

working snippet below:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
  $scope.detectIndex = () => {
    for (var i = 0; i < $scope.names.length; i++) {
      if ($scope.names[i] == $scope.selectedName) {
        $scope.selectedIndex = i;
        return;
      }
    }
  }
});

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

<div ng-app="myApp" ng-controller="myCtrl" ng-init="selectedIndex = null">
  <select ng-model="selectedName" ng-options="x for x in names" ng-change="detectIndex()">
    <option value="" disabled="disabled">
      Choose...
    </option>
  </select>
  <p>you selected: {{ selectedName }} at index: {{ selectedIndex }}</p>
</div>

I am new to the angularJS code.

I am trying to display the dropdown which will show a few options.

Below my select element, I want to display some text based on the user selection from the above dropdown.

To select the relevant text I need to know the index or position of the selected item from the dropdown.

Here is how my code looks like.

<select name="selUsers"
        ng-model="activeUser"
        ng-options="user.name as user.name for user in userOptions"
        required>
    <option value="" disabled="disabled">
      Choose...
    </option>
</select>

<span>
//need to display text based on above selection
</span>

Can somebody help me here how I can get the index of the selected item?

Thankyou.