在AngularJS $ scope.data第一次更新點擊按鈕其workind第二次點擊

Question

在這裏我傳遞6個輸入和獲得6個輸出字段，當我第一次點擊按鈕$ scope.data沒有綁定或更新UI中的數據如果我點擊按鈕第二次$ scope.data綁定或更新UI中的數據。請幫助我解決這個問題。

<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調用的任何更改。使用angularjs'$ http.get來獲取數據。另一個解決方案是用$ timeout或$ apply包裝$ ajax調用。