在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调用。