use column in angularjs uigrid - angularjs

Question

I am using angularjs uigrid with $scope http to get data from controller.
now here i used columns like this:
<div ng-app = "myapp" ng-controller="HelloController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
<script type="text/javascript">
var StudentApp = angular.module('myapp', ['ui.grid']);
StudentApp.controller('HelloController', function ($scope, StudentService) {
$scope.columnDefs = [
{ field: 'FirstName', title: 'fname' },
{ field: 'Last Name' },
{ field: 'Salary' },
{ field: 'DOB' }
],
getStudents();
function getStudents() {
StudentService.getStudents()
.success(function (studs) {
$scope.myData = studs;
console.log($scope.students);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
}
});
StudentApp.factory('StudentService', ['$http', function ($http) {
var StudentService = {};
StudentService.getStudents = function () {
return $http.get('/Home/GetEmployee');
};
return StudentService;
} ]);
</script>
in this i have used $scope.columndefs but it is not working.
And how to format date value here?
When i run this apps value is showing in below like after some 30 lines value is showing.

Answer 1

Try this
<div ng-app = "myapp" ng-controller="HelloController">
<div id="grid1" ui-grid="gridoptions" class="grid"></div>
</div>
<script type="text/javascript">
var StudentApp = angular.module('myapp', ['ui.grid']);
StudentApp.controller('HelloController', function ($scope, StudentService) {
$scope.columnDefs = [
{ field: 'FirstName', title: 'fname' },
{ field: 'Last Name' },
{ field: 'Salary' },
{ field: 'DOB' }
],
$scope.gridoptions = {
data:'myData',
columnDefs: $scope.columnDefs,
}
getStudents();
function getStudents() {
StudentService.getStudents()
.success(function (studs) {
$scope.myData = studs;
console.log($scope.students);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
}
});
StudentApp.factory('StudentService', ['$http', function ($http) {
var StudentService = {};
StudentService.getStudents = function () {
return $http.get('/Home/GetEmployee');
};
return StudentService;
} ]);
</script>
I hope this would work.