dataList auto fill other fields when an option is selected - AngularJs

I have a data-list of Names, i want to auto fill the phone number and the location fields when the name is selected, for now, the fields are getting their values from scopes on the angular controller by clicking on the < td > column, this is my code:

HTML SOURCE:

<div ng-controller="facture_retour"">
    <table>
        <thead>
            <tr>
                <td><strong>Client</strong></td>
                <td>
                    <input type="text" id="client_List" list="clientList" />
                    <datalist id="clientList">
                    <option ng-repeat="fc in facture_client_retour" data-tele="{{fc.phone_number}}" data-location="{{fc.location}}" data-id="{{fc.id}}" value="{{fc.fname}} {{fc.lname}} |{{fc.code}}" id="optIdFc">
                </datalist>
                </td>
            </tr>
            <tr>
                <td ng-click="getClientAttr();"><strong>Telephone</strong></td>
                <td>{{clientPhoneNumber}}</td>
            </tr> 
            <tr>
                <td><strong>Location</strong></td>
                <td>{{clientLocation}}</td>
            </tr>
        </thead>
    </table>
</div>

I am getting no errors and it works fine when click on the < td > to call the function getClientAttr(), but my need is to auto call this function when the option is selected. JS SOURCE:

app.controller('facture_retour',function($scope, $http){
        $scope.facture_client_retour;
        angular.element(document).ready(function () {
            $scope.getAllClients();
    });


 /*This function is responsible of getting all clients Name and display them 
 in the data-list */
$scope.getAllClients=function(){
            var url = '../php/mainPageFacture.php';
            var data = {"function":"getAllClients"};
            var options={
                type : "get",
                url : url,
                data: data,
                dataType: 'json',
                async : false,
                cache : false,
                success : function(response,status) {
                    $scope.facture_client_retour = response;
                    $scope.$apply();
                },
                error:function(request,response,error){
                    // alert("Error: " + error + ". Please contact developer");
                    swal({
                      title: "Please contact your software developer",
                      text: "ERROR: " + error,
                      type: "warning",
                      showCancelButton: false,
                      confirmButtonClass: "btn-info",
                      confirmButtonText: "Ok",
                      closeOnConfirm: true
                    });
                }
            };
            $.ajax(options);
            $scope.call=getClientAttr();
        }

 /*this function getting the other fields (phone number,location) values and 
 display them by clicking on < td >*/
        $scope.getClientAttr=function(){
            //alert("here we go");
            var val = $('#client_List').val()
            var client_phone_number= $('#clientList option').filter(function() {
                return this.value == val;
            }).data('tele');

             $scope.clientPhoneNumber=client_phone_number;
                var val = $('#client_List').val()
                var client_location= $('#clientList option').filter(function() {
                    return this.value == val;
                }).data('location');
             $scope.clientLocation=client_location; 
        }

    });

add a ng-model to your input

<input type="text" ng-model="Data" id="client_List" list="clientList" />

you can add ng-click to your datalist option and set selected value to model

<datalist id="clientList">
    <option ng-repeat="fc in facture_client_retour" data-tele="{{fc.phone_number}}" data-location="{{fc.location}}" data-id="{{fc.id}}" value="{{fc.fname}} {{fc.lname}} |{{fc.code}}" id="optIdFc" ng-click="Data = fc">
</datalist>

and set values of location and phone number in your controller when model changes

  $scope.$watchCollection('Data', function(newValue, oldValue) {
    if(newValue != undefined)
      angular.forEach($scope.data, function(value, key) {
        if(value.name == newValue){
            $scope.clientPhoneNumber = value.phone_number;
            $scope.clientLocation = value.location;
        }
      });
  });