I am using igGrid as a Directive; basically your online sample i.e., Have you checked to see if your WebAPI is properly returning data - well I believe that is really the question "properly returning data"; and well my JSON object does contain data using the dataService.js  your example file found online, see below.

<ig-grid id="homesGrid"
data-source="homes"
width="100%"

auto-commit="true"
auto-generate-columns="false"
event-rendered="homesGridRendered">
<columns>
<column key="CommunityName" header-text="Address" data-type="string"></column>
</columns>
<features>
<feature name="Sorting"
event-column-sorted="homesGridColumnSorted"></feature>
<feature name="Selection"
event-row-selection-changed="homesGridRowSelectionChanged"></feature>
<feature name="Paging"
page-size="5"
event-page-size-changed="homesGridPageSizeChanged"
event-page-index-changed="homesGridPageSelectionChanged"></feature>
</features>
</ig-grid>

app.factory('dataService',

['$http', '$q',
function($http, $q){

'use strict';

var svc = {

getAll: function(){

var deferred = $q.defer();

$http.get("http://localhost:81/sfhl_api/").success(deferred.resolve).error(deferred.reject);

return deferred.promise;
},
};

return svc;

}]);

AND YOUR masterDetailCtrl:

dataService.getAll().then(function (homes) {
var x2 = [{ "CommunityName": "c1" }];

$scope.homes = homes;
}, function (error) {
$scope.error = error;
});