AngularJs+TypeScript:-How to get the selected index value in ng-select

Question

I m working on module where I have check a condition for the visibility of a panel as if slected index of a dropdown is not equal to 0 or -1 than it will make visible to my panel else it will not. I am bit confused as how to get the selected index value of my dropdown using ng-select. I have shown my dropdown code below:-

 <div data-ng-app="CustomerNew" data-ng-controller="CreateCustomerCtrl as custom"  ng-init= getFormData(); >
<table>
<tr>
     <td>                                             
     <select id="accountselector" style="width: 100%;">
     <option value="0">--- Select an option ---</option>
    <option data-ng-repeat="acnt in listAccountTypes" value="{{acnt.id}}">{{acnt}}</option>
    </select>
    </td></tr>
</table>
</div>

Here is my typescript controller

/// <reference path="../interface/interface.ts" />
/// <reference path="../../scripts/typings/jquery/jquery.d.ts" />
/// <reference path="../../scripts/typings/angularjs/angular.d.ts" />

module CustomerNew.controllers {
    export class CreateCustomerCtrl {
        static $inject = ['$scope', '$http', '$templateCache'];
        constructor(protected $scope: ICustomerScope,
            protected $http: ng.IHttpService,
            protected $templateCache: ng.ITemplateCacheService) {
            $scope.getFormData = this.getFormData;
        }
           public getFormData = (getFormData: any) => {
            this.$http.get(doAccountTypeUrl).
                success((data, status, headers, config) => {
                this.$scope.listAccountTypes = data["AccountCodesDisplayTypes"];
            }).
                error((data, status) => {
                debugger;
                console.log("In Error:-Request Failed");
                alert(status);
            });
        }  
    }
    var customerapp = angular.module("CustomerNew", []);
    customerapp
      .controller('CreateCustomerCtrl', CustomerNew.controllers.CreateCustomerCtrl);
    var doAccountTypeUrl = '/API/Create/GetLoadData';
}
</Controller>

Condition Which i have to check:

if (listAccountTypes.SelectedIndex > -1 && listAccountTypes.SelectedValue != "0")
 {
 IntlCountryAddres objIntlCountryAddres = objIntlCountryAddressController.GetByCountryId(Convert.ToInt32(listAccountTypes.SelectedValue));
 if (objIntlCountryAddres != null && objIntlCountryAddres.id > 0)
    {
       pnlBillingCountry.Visible = true;
       LoadBillingInfo(objIntlCountryAddres);
    }
     }
 else
    {
      pnlBillingCountry.Visible = false;
    }

Note:-I am checking this condition on page load I am getting data in below format:-

Answer 1

Don't have the option inline:

<select id="accountselector" style="width: 100%;">
 <option value="0">--- Select an option ---</option>

Instead use ng-options and ng-model:

<select id="accountselector" style="width: 100%;" ng-options="check docs" ng-model="check docs"></select>

Check the docs : https://docs.angularjs.org/api/ng/directive/ngOptions