AngularJS@1.0.2

<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>

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);
  };
});

<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>

<!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>

/* Put your css in here */