gigenthomas/app.js

## app.js


var app = angular.module('plunker', ['ngGrid']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.fruits = [ 'Apple', 'Orange' ,'Banana'];

    $scope.myData = [
        {name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}];


    $scope.gridOptions = {
        data: 'myData',
        showGroupPanel: true,
        jqueryUIDraggable: true
    };


});

## index.html
<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>

    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>

    <link rel="stylesheet" href="style.css">


    <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
Hello {{name}}!


<div ng-repeat="fruit in fruits">
    {{ fruit }}
</div>

<div class="gridStyle" ng-grid="gridOptions"></div>


</body>

</html>

## style.css
/* Put your css in here */


.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 500px;
    height: 300px;
}


	var app = angular.module('plunker', ['ngGrid']);

	app.controller('MainCtrl', function($scope) {
	$scope.name = 'World';
	$scope.fruits = [ 'Apple', 'Orange' ,'Banana'];

	$scope.myData = [
	{name: "Moroni", age: 50},
	{name: "Tiancum", age: 43},
	{name: "Jacob", age: 27},
	{name: "Nephi", age: 29},
	{name: "Enos", age: 34}];


	$scope.gridOptions = {
	data: 'myData',
	showGroupPanel: true,
	jqueryUIDraggable: true
	};


	});
	<!doctype html>
	<html ng-app="plunker">

	<head>
	<meta charset="utf-8">
	<title>AngularJS Plunker</title>

	<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
	<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>

	<link rel="stylesheet" href="style.css">


	<script src="app.js"></script>
	</head>

	<body ng-controller="MainCtrl">
	Hello {{name}}!


	<div ng-repeat="fruit in fruits">
	{{ fruit }}
	</div>

	<div class="gridStyle" ng-grid="gridOptions"></div>


	</body>

	</html>
	/* Put your css in here */


	.gridStyle {
	border: 1px solid rgb(212,212,212);
	width: 500px;
	height: 300px;
	}