pjsvis/app.js

## app.js
// This is a module for cloud persistance in mongolab - https://mongolab.com
angular.module('mongolab', ['ngResource']).
factory('Project', function($resource) {
  var Project = $resource('https://api.mongolab.com/api/1/databases' + '/cars/collections/projects/:id', {
    apiKey: '4f99a253e4b015f77d298ab8'
  }, {
    update: {
      method: 'PUT'
    }
  });
  Project.prototype.update = function(cb) {
    return Project.update({
      id: this._id.$oid
    }, angular.extend({}, this, {
      _id: undefined
    }), cb);
  };
  Project.prototype.destroy = function(cb) {
    return Project.remove({
      id: this._id.$oid
    }, cb);
  };
  return Project;
});
var carApp = angular.module('carApp', ['mongolab']);
carApp.controller('CarCtrl', function($scope) {
  $scope.title = 'Car Hire';
  $scope.cars = [{
    oid: 1,
    make: "Honda",
    model: "Civic",
    color: "Black",
    shade: "Dark",
    hired: ""
  }, {
    oid: 2,
    make: "Saab",
    model: "Viggen",
    color: "White",
    shade: "Light",
    hired: ""
  }, {
    oid: 3,
    make: "Volvo",
    model: "Estate",
    color: "Red",
    shade: "Dark",
    hired: ""
  }, {
    oid: 4,
    make: "Ford",
    model: "Bronco",
    color: "Black",
    shade: "Dark",
    hired: ""
  }, {
    oid: 5,
    make: "Daihatsu",
    model: "Charade",
    color: "Yellow",
    shade: "Light",
    hired: ""
  }];
  $scope.colors = [{
    name: 'Black',
    shade: 'Dark'
  }, {
    name: 'White',
    shade: 'Light'
  }, {
    name: 'Red',
    shade: 'Dark'
  }, {
    name: 'Blue',
    shade: 'Dark'
  }, {
    name: 'Yellow',
    shade: 'Light'
  }];

  $scope.currentCar = _.first($scope.cars);
  $scope.setCurrentCar = function(car) {
    $scope.currentCar = car;
  };

  $scope.saveCar = function(car) {
    if (car.id === null) {
      $scope.cars.push(car);
    } else {
      $scope.cars[car.id] = car;
    }
  };
});

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

  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
    <script src="http://sugarjs.com/release/1.2.3/minified/sugar-1.2.3.min.js"></script>
    <script src="app.js"></script>
  </head9

  <body>
    <div class="container" ng-controller="CarCtrl">
      <h2>{{title}}</h2>
      <input type="text" ng-model="filterCars" placeholder="Search"
      class="input-medium search-query">
      <table class="table table-condensed table-striped">
        <thead>
          <tr>
            <th>
              <a href="#" ng-click="setCurrentCar(null)"><i class="icon-plus-sign">&nbsp;&nbsp;</i></a>
            </th>
            <th>Make</th>
            <th>Model</th>
            <th>Hired</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="car in cars | filter:filterCars">
            <td>
              <a href="#" ng-click="setCurrentCar(car)"><i class="icon-pencil">&nbsp;&nbsp;</i></a>
            </td>
            <td>{{car.make}}</td>
            <td>{{car.model}}</td>
            <td>{{car.hired}}</td>
          </tr>
        </tbody>
        <tfoot></tfoot>
      </table>
      <div class="row">
        <form class="form-vertical well span3">
          <fieldset>
            <legend>Car Hire Details</legend>
            <div class="control-group">
              <label>oid</label>
              <input type="text" ng-model="currentCar.oid" placeholder="oid">
              <label>Make</label>
              <input type="text" ng-model="currentCar.make" placeholder="Make">
              <label>Model</label>
              <input type="text" ng-model="currentCar.model" placeholder="Model">
              <label>Color</label>
              <select ng-model="currentCar.color" ng-options="c.name for c in colors"
              placeholder="Color"></select>
              <label>Shade</label>
              <select ng-model="currentCar.shade" ng-options="c.shade for c in colors"
              placeholder="Shade"></select>
              <label>Hired</label>
              <input type="text" ng-date ng-model="currentCar.hired" placeholder="Hired">
              <div>
                <br>
                <button ng-click="saveCar(currentCar)" class="btn btn-success">Save</button>
                <button type="cancel" class="btn btn-default">Cancel</button>
              </div>
            </div>
          </fieldset>
        </form>
        <div class="well span3">
          <legend>Issues</legend>
          <ol>
            <li>How do we update/cancel an edit on an existing car?</li>
            <li>How do we add a new car?</li>
            <li>How do we set the shade based on the color and vice versa?</li>
            <li>What about dates?</li>
          </ol>
        </div>
        <div class="well span5">
          <legend>Debug</legend>
          <br><pre>cars: {{cars | json}}</pre>
          <br>currentCar: <pre>{{currentCar | json}}</pre></div>
      </div>
  </body>
</html>

## style.css
/* Put your css in here */
 .container {
  width:90%;
}
	// This is a module for cloud persistance in mongolab - https://mongolab.com
	angular.module('mongolab', ['ngResource']).
	factory('Project', function($resource) {
	var Project = $resource('https://api.mongolab.com/api/1/databases' + '/cars/collections/projects/:id', {
	apiKey: '4f99a253e4b015f77d298ab8'
	}, {
	update: {
	method: 'PUT'
	}
	});
	Project.prototype.update = function(cb) {
	return Project.update({
	id: this._id.$oid
	}, angular.extend({}, this, {
	_id: undefined
	}), cb);
	};
	Project.prototype.destroy = function(cb) {
	return Project.remove({
	id: this._id.$oid
	}, cb);
	};
	return Project;
	});
	var carApp = angular.module('carApp', ['mongolab']);
	carApp.controller('CarCtrl', function($scope) {
	$scope.title = 'Car Hire';
	$scope.cars = [{
	oid: 1,
	make: "Honda",
	model: "Civic",
	color: "Black",
	shade: "Dark",
	hired: ""
	}, {
	oid: 2,
	make: "Saab",
	model: "Viggen",
	color: "White",
	shade: "Light",
	hired: ""
	}, {
	oid: 3,
	make: "Volvo",
	model: "Estate",
	color: "Red",
	shade: "Dark",
	hired: ""
	}, {
	oid: 4,
	make: "Ford",
	model: "Bronco",
	color: "Black",
	shade: "Dark",
	hired: ""
	}, {
	oid: 5,
	make: "Daihatsu",
	model: "Charade",
	color: "Yellow",
	shade: "Light",
	hired: ""
	}];
	$scope.colors = [{
	name: 'Black',
	shade: 'Dark'
	}, {
	name: 'White',
	shade: 'Light'
	}, {
	name: 'Red',
	shade: 'Dark'
	}, {
	name: 'Blue',
	shade: 'Dark'
	}, {
	name: 'Yellow',
	shade: 'Light'
	}];

	$scope.currentCar = _.first($scope.cars);
	$scope.setCurrentCar = function(car) {
	$scope.currentCar = car;
	};

	$scope.saveCar = function(car) {
	if (car.id === null) {
	$scope.cars.push(car);
	} else {
	$scope.cars[car.id] = car;
	}
	};
	});
	<!doctype html>
	<html ng-app="carApp">

	<head>
	<meta charset="utf-8">
	<title>AngularJS Plunker</title>
	<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
	<link rel="stylesheet" href="style.css">
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script>
	<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script src="http://sugarjs.com/release/1.2.3/minified/sugar-1.2.3.min.js"></script>
	<script src="app.js"></script>
	</head9

	<body>
	<div class="container" ng-controller="CarCtrl">
	<h2>{{title}}</h2>
	<input type="text" ng-model="filterCars" placeholder="Search"
	class="input-medium search-query">
	<table class="table table-condensed table-striped">
	<thead>
	<tr>
	<th>
	<a href="#" ng-click="setCurrentCar(null)"><i class="icon-plus-sign">  </i></a>
	</th>
	<th>Make</th>
	<th>Model</th>
	<th>Hired</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="car in cars \| filter:filterCars">
	<td>
	<a href="#" ng-click="setCurrentCar(car)"><i class="icon-pencil">  </i></a>
	</td>
	<td>{{car.make}}</td>
	<td>{{car.model}}</td>
	<td>{{car.hired}}</td>
	</tr>
	</tbody>
	<tfoot></tfoot>
	</table>
	<div class="row">
	<form class="form-vertical well span3">
	<fieldset>
	<legend>Car Hire Details</legend>
	<div class="control-group">
	<label>oid</label>
	<input type="text" ng-model="currentCar.oid" placeholder="oid">
	<label>Make</label>
	<input type="text" ng-model="currentCar.make" placeholder="Make">
	<label>Model</label>
	<input type="text" ng-model="currentCar.model" placeholder="Model">
	<label>Color</label>
	<select ng-model="currentCar.color" ng-options="c.name for c in colors"
	placeholder="Color"></select>
	<label>Shade</label>
	<select ng-model="currentCar.shade" ng-options="c.shade for c in colors"
	placeholder="Shade"></select>
	<label>Hired</label>
	<input type="text" ng-date ng-model="currentCar.hired" placeholder="Hired">
	<div>
	<br>
	<button ng-click="saveCar(currentCar)" class="btn btn-success">Save</button>
	<button type="cancel" class="btn btn-default">Cancel</button>
	</div>
	</div>
	</fieldset>
	</form>
	<div class="well span3">
	<legend>Issues</legend>
	<ol>
	<li>How do we update/cancel an edit on an existing car?</li>
	<li>How do we add a new car?</li>
	<li>How do we set the shade based on the color and vice versa?</li>
	<li>What about dates?</li>
	</ol>
	</div>
	<div class="well span5">
	<legend>Debug</legend>
	<br><pre>cars: {{cars \| json}}</pre>
	<br>currentCar: <pre>{{currentCar \| json}}</pre></div>
	</div>
	</body>
	</html>