В AngularJS $ scope.data обновляется в первый раз нажмите кнопку Его рабочая секунда второй раз нажата

Question

Здесь я прохожу 6 входов и получаю 6 полей вывода при первом нажатии кнопки $ scope.data не является обязательным или обновляется данные в пользовательском интерфейсе, если я нажимаю кнопку второй раз, когда $ scope.data привязывает или обновляет данные в пользовательском интерфейсе. Пожалуйста, помогите мне в этой проблеме.

<h3>Input:</h3> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">SalesService</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="SalesService" ng-model="SalesService" id="SalesService"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">PlatForm</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="PlatForm" ng-model="PlatForm" id="PlatForm"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">SegMent:</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="SegMent" ng-model="SegMent" id="SegMent"> 

      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">Path:</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="Path" ng-model="Path"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">UserId:</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="UserId" ng-model="UserId"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">CardNo:</label> 
      <div class="col-sm-10"> 
       <input type="text" placeholder="CardNo" ng-model="CardNo"> 
      </div> 
     </div> 
    </form> 
    <div style ="width:700px;float:right"> 
     <button class="btn btn-success" id="Submit" ng-click="getBinLookUp()"> 
      <span class="glyphicon glyphicon-send "></span>  Submit 
     </button> 
    </div> 
    <h3>Output:</h3> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">ReturnCode</label> 
      <div class="col-sm-10"> 
       <input type="text" ng-disabled="true" ng-model="data.ReturnCode" placeholder="ReturnCode" id="ReturnCode">      
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">Return Message</label> 
      <div class="col-sm-10"> 
       <input type="text" ng-disabled="true" ng-model="data.ReturnMessage" placeholder="ReturnMsg" id="ReturnMsg"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">Card Company:</label> 
      <div class="col-sm-10"> 
       <input type="text" ng-disabled="true" ng-model="data.Company" placeholder="CardCompany" id="CardCompany"> 

      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">Charge Type:</label> 
      <div class="col-sm-10"> 
       <input type="text" ng-disabled="true" ng-model="data.ChargeType" placeholder="ChargeType"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-sm-2 control-label">GEICO Card IND:</label> 
      <div class="col-sm-10"> 
       <input type="text" ng-disabled="true" ng-model="data.GEICOCardInd" placeholder="GEICOCardIND"> 
      </div> 
     </div> 
    </form> 

</div> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<script src="~/Scripts/jquery-2.1.3.js"></script> 
<script> 
    var app = angular.module("binLookUpMdl", []); 

    app.controller("binLookUpController", function ($scope) { 
     $scope.SalesService = ''; 
     $scope.PlatForm = ''; 
     $scope.SegMent = ''; 
     $scope.Path = ''; 
     $scope.UserId = ''; 
     $scope.CardNo = ''; 
     $scope.ReturnCode = ''; 
     $scope.ReturnMessage = ''; 
     $scope.Company = ''; 
     $scope.ChargeType = ''; 
     $scope.GEICOCardInd = ''; 
     $scope.data = {}; 

     $scope.getBinLookUp = function() { 
      //alert("JHi"); 
      var inputs = {}; 
      inputs.SalesService = $scope.SalesService; 
      inputs.PlatForm = $scope.PlatForm 
      inputs.SegMent = $scope.SegMent; 
      inputs.Path = $scope.Path; 
      inputs.UserId = $scope.UserId; 
      inputs.CardNo = $scope.CardNo;    
      $.ajax({ 
       url: "/Home/getBinLookUp", 
       type: "POST", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8",      
       data: JSON.stringify(inputs), 
       success: function (result) { 
        //alert(JSON.stringify(result)); 
        $scope.data = result[0];       
       } 
      }); 

      } 

}); 
</script> 

Answer 1

Попробуйте с $scope.$apply(); после $scope.data = result[0];

Answer 2

Не использовать JQuery в $ Ajax для выборки данных. Angularjs не знает о каких-либо изменениях от негласных HTTP-вызовов. Используйте URL-адрес angularjs $ http.get для извлечения данных. Другое решение - обернуть вызов $ ajax с $ timeout или $ apply.