javascript - Angular data binding not working -

i have been struggling data binding in asp.net webforms, using angularjs.

i have following angular:

 (function () {         var app = angular.module("registrationmodule", []);          app.factory("exampleservice", exampleservice);          function exampleservice($http) {             function getdata(id) {                 return $http.post("legacypage.aspx/getdata", { id: id })                 .then(function (response) {                     return response.data; //data comes json                    //also tried response.data.d                 });             };              return {                 getdata: getdata             };         };          app.controller("mainctrl", ["$scope", "exampleservice", mainctrl]);          function mainctrl($scope, exampleservice) {              $scope.generatetext = "generate";             $scope.loading = false;               function oncomplete(data) {                 unload(data);             }              function err(reason) {                 unload("ajax has failed.");             }              $scope.getdata = function (id) {                 load();                 exampleservice.getdata(id).then(oncomplete, err);             }              function unload(result) {                 $scope.loading = false;                 $scope.generating = false;                 $scope.generatetext = "generate";                 $scope.thedata = result; //does not work                  //i have tried (with no success):                  //$scope.$apply(function () {                 //$scope.thedata = result;                 //});                  //$scope.thedata = json.parse(result);                  //$scope.thedata = angular.fromjson(result);             }              function load() {                 $scope.loading = true;                 $scope.generating = true;                 $scope.generatetext = "generating...";             }         };      }()); 

my html:

<div ng-app="registrationmodule">      <div ng-controller="mainctrl">         <input style="display: block; margin: 0 auto;" type="text" class="form-control" placeholder="id" ng-model="id" />         <input ng-click="getdata(id)" type="button" class="btn btn-primary btn-lg" value="{{generatetext}}" ng-disabled="generating" />          <div class="row">             <div class="span10">                 <table class="table table-responsive table-hover table-condensed">                     <tr>                         <th>id</th>                         <th>activity code</th>                         <th>duration</th>                         <th>date created</th>                     </tr>                     <tr ng-repeat="element in thedata">                         <td>{{element.id}}</td>                         <td>{{element.activitycode}}</td>                         <td>{{element.duration}}</td>                         <td>{{element.datecreated}}</td>                     </tr>                 </table>                 <br />             </div>         </div>     </div> </div> 

code behind/backend c#:

[webmethod] public static string getdata(int id) {     var dt = getdata(id);      if (dt == null) return "";      var json = dt.serialize() ?? "";      return json; }  public static string serialize(this datatable dt) {     if (dt == null)     {         throw new nullreferenceexception("dt parameter cannot null");     }      try     {         var serializer = new javascriptserializer();         var rows = new list<dictionary<string, object>>();          dictionary<string, object> row;          foreach (datarow dr in dt.rows)         {             row = new dictionary<string, object>();             foreach (datacolumn col in dt.columns)             {                 row.add(col.columnname, dr[col]);             }             rows.add(row);         }          return serializer.serialize(rows);     }     catch     {         return null;     } } 

essentially, data coming json not being bound. getting json in angular, not able handle it. think missing simple, have yet find solution

i think might have found problem. in getdata() function, named id argument "studentid", referring "id" later on. here's fix:

function getdata(studentid) {     return $http.post("legacypage.aspx/getdata", {         id: studentid // used "id", needed "studentid"     })     .then(function (response) {         return response.data;     }); }; 

edit

sounds issue might api returning single hash object so:

$scope.thedata = {     id: 1,     activitycode: 'foo'     ...etc } 

if that's case, don't need use ng-repeat directive show 1 object. change view so:

<div ng-app="registrationmodule">      <div ng-controller="mainctrl">         <input style="display: block; margin: 0 auto;" type="text" class="form-control" placeholder="id" ng-model="id" />         <input ng-click="getdata(id)" type="button" class="btn btn-primary btn-lg" value="{{generatetext}}" ng-disabled="generating" />          <div class="row">             <div class="span10">                 <table class="table table-responsive table-hover table-condensed">                     <tr>                         <th>id</th>                         <th>activity code</th>                         <th>duration</th>                         <th>date created</th>                     </tr>                     <tr>                         <td>{{thedata.id}}</td>                         <td>{{thedata.activitycode}}</td>                         <td>{{thedata.duration}}</td>                         <td>{{thedata.datecreated}}</td>                     </tr>                 </table>                 <br />             </div>         </div>     </div> </div> 

you need use ng-repeat directive if api returning array of objects iterate on so:

$scope.thedata = [{     id: 1,     activitycode: 'foo'     ...etc }, {     id: 2,     activitycode: 'bar'     ...etc }]