Consume SharePoint 2013 REST API using AngularJS

Page copy protected against web site content infringement by Copyscape

The code below shows you how to invoke a SharePoint 2013 REST API. Understand this code is listed just for you to understand how to invoke REST API. In the real world, you would want to separate the script file into its own .js file. Recommended practice is to have an individual file for each controller. Also, http service is asynchronous here, so should always have on success and on failure events.


I have a list called Customers in SP 2013, so the REST API call would look something like this:


Also, to note is that I am getting back the REST API output as JSON, with the following statement:  application/json; odata=verbose

If you examine JSON output from SP, the informatio you need resides within the details structure, so that is the reason you see that I am storing my customer data by accessing <dataoutputfromJSON>.d.details


Here is the complete HTML file to access SharePoint 2013 list via REST API using AngularJS


<html ng-app=”tkCustomerApp”>


    <title>SharePoint REST API Call </title>

    <script src=”scripts/angular.js”></script>



      var tkCustomerApp= angular.module(‘tkCustomerApp’, []);

      tkCustomerApp.controller(‘CustomerCtrl’, function ($scope, $http){

        $http({headers: { “Accept”: “application/json; odata=verbose” }, method: ‘GET’, url:”http://tksp15:90/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry”})

.success(function(data) {

          $scope.customers = data.d.results;





  <body ng-controller=”CustomerCtrl”>


   <div> Search:<input ng-model=”query” type=”text”/> </div>

   <br />



        <th>Customer ID</th>

        <th>Customer Name</th>

<th>Customer Address</th>

<th>Customer State</th>

<th>Customer Country</th>


      <tr ng-repeat=”cust in customers | filter:query”>