form.html
                    
<form name="form">
<legend>Edit form</legend>
<label>Name</label>
<input type="text" ng-model="project.name">
<label>Site</label>
<input type="url" ng-model="project.site">
<label>Description</label>
<input type="text" ng-model="project.description">
<hr>
<button class="btn btn-primary" ng-click="save()" ng-disabled="!hasChanges()||form.$invalid">Save</button>
<button class="btn btn-warning" ng-click="abandonChanges()">Abandon</button>
<button class="btn btn-danger" ng-click="remove()" ng-disabled="!project.$id()">Remove</button>
</form>
                    app.js
                    
var app = angular.module('plunker', ['mongolabResourceHttp'], function($routeProvider) {
$routeProvider.when('/list', {templateUrl:'list.html', controller:'TodoListCtrl', resolve:{
projects:function(Project){return Project.all();}
}});
$routeProvider.when('/edit/:id', {templateUrl:'form.html', controller:'TodoFormCtrl', resolve:{
project:function(Project, $route){return Project.getById($route.current.params.id);}
}});
$routeProvider.when('/new', {templateUrl:'form.html', controller:'TodoFormCtrl', resolve:{
project:function(Project){return new Project();}
}});
$routeProvider.otherwise({redirectTo:'/list'});
});
app.constant('MONGOLAB_CONFIG',{API_KEY:'4f847ad3e4b08a2eed5f3b54', DB_NAME:'angularjs'});
app.factory('Project', function ($mongolabResourceHttp) {
return $mongolabResourceHttp('projects');
});
app.controller('TodoListCtrl', function($scope, $location, projects) {
$scope.projects = projects;
$scope.new = function(){
$location.path('/new');
};
$scope.edit = function(project){
$location.path('/edit/'+project.$id());
};
});
app.controller('TodoFormCtrl', function($scope, $location, project) {
var projectCopy = angular.copy(project);
var changeSuccess = function() {
$location.path('/list');
};
var changeError = function() {
throw new Error('Sth went wrong...');
};
$scope.project = project;
$scope.save = function(){
$scope.project.$saveOrUpdate(changeSuccess, changeSuccess, changeError, changeError);
};
$scope.remove = function() {
$scope.project.$remove(changeSuccess, changeError);
};
$scope.abandonChanges = function() {
$location.path("/list");
};
$scope.hasChanges = function(){
return !angular.equals($scope.project, projectCopy);
};
});
                    list.html
                    
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>name</th>
<th>site</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in projects" ng-click="edit(project)">
<td>{{project.name}}</td>
<td>{{project.site}}</td>
<td><i class="icon-edit"></i></td>
</tr>
</tbody>
</table>
<div class="well">
<button class="btn" ng-click="new()">New</button>
</div>
                    index.html
                    
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>MongoLab resource with promises support</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="https://raw.github.com/pkozlowski-opensource/angularjs-mongolab-promise/master/src/mongolabResourceHttp.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
                    style.css
                    
/* Put your css in here */