codearachnid/app.js

## app.js

angular.module('SampleApp', ['ngRoute'])

    .filter('filterByProperty', function(){
        return function( items, propMatch ){
            var filtered = [];
            for (var i = 0; i < items.length; i++) {
              var item = items[i];
              for(var property in propMatch){
                if (propMatch[property] == item[property]) {
                  filtered.push(item);
                }
              }
            }
            return filtered;
        };
    })

    .service('sharedItems',function($filter){
        var items= [];
        return{
            mock: function(){
                items = [
                    { "id": 1, "label":"item 1", "selected":false },
                    { "id": 2, "label":"item 2", "selected":true },
                    { "id": 3, "label":"item 3", "selected":false }
                ];
                return items;
            },
            getById: function( id ){
                console.log(items, id);
                return $filter('filterByProperty')( items, {id:id} );
            },
            get: function(){
                return items;
            },
            add: function( item ){
                items.push(item);
            },
            set: function(value){
                items=value;
            }
        };
    })

    .config(function($routeProvider) {
      $routeProvider
        .when('/', {
          controller:'ListController as items',
          templateUrl:'list.html'
        })
        .when('/view/:itemId', {
          controller:'ViewItemController as item',
          templateUrl:'view.html'
        })
        .otherwise({
          redirectTo:'/'
        });
    })

    .controller('ListController', function( $scope,$location, $routeParams, sharedItems ){
        console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
        var items = this;

        sharedItems.mock();

        items.list = sharedItems.get();

        items.additem = function() {
          sharedItems.add({id:0,label:items.newItemLabel, selected:false});
          items.list = sharedItems.get();
          items.newItemLabel = '';
        };
    })

    .controller('ViewItemController', function($scope, $location, $routeParams,sharedItems){
        console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
        //console.log( $routeParams.itemId, sharedItems.get(), sharedItems.getById( $routeParams.itemId ) );
        var item = this; // sharedItems.getById( $routeParams.itemId );
        item.detail = sharedItems.getById( $routeParams.itemId )[0];
        console.log(item);
        // item.id =
    });

## index.html
<html lang="en" ng-app="SampleApp">
<head>
    <meta name="viewport" content="initial-scale=1" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

    <h1>Sample App</h1>
    <div ng-view></div>


</body>
</html>

## list.html
<h2>List</h2>
<table>
    <thead>
        <th>ID</th>
        <th>Label</th>
        <th>Checked</th>
    </thead>
    <tbody ng-repeat=" item in items.list">
        <tr>
            <td>{{item.id}}</td>
            <td><a ng-href="#/view/{{item.id}}">{{item.label}}</a></td>
            <td><input type="checkbox" ng-model="item.selected"></td>
        </tr>
    </tbody>
</table>
<form ng-submit="items.additem()">
<input type="text" ng-model="items.newItemLabel"  size="30"
       placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>

## view.html
<h2>View</h2>
<table>
    <thead>
        <th>ID</th>
        <th>Label</th>
        <th>Checked</th>
    </thead>
    <tbody>
        <tr>
            <td>{{item.detail.id}}</td>
            <td><a ng-href="#/view/{{item.detail.id}}">{{item.detail.label}}</a></td>
            <td><input type="checkbox" ng-model="item.detail.selected"></td>
        </tr>
    </tbody>
</table>
<a href="#/">Back</a>

	angular.module('SampleApp', ['ngRoute'])

	.filter('filterByProperty', function(){
	return function( items, propMatch ){
	var filtered = [];
	for (var i = 0; i < items.length; i++) {
	var item = items[i];
	for(var property in propMatch){
	if (propMatch[property] == item[property]) {
	filtered.push(item);
	}
	}
	}
	return filtered;
	};
	})

	.service('sharedItems',function($filter){
	var items= [];
	return{
	mock: function(){
	items = [
	{ "id": 1, "label":"item 1", "selected":false },
	{ "id": 2, "label":"item 2", "selected":true },
	{ "id": 3, "label":"item 3", "selected":false }
	];
	return items;
	},
	getById: function( id ){
	console.log(items, id);
	return $filter('filterByProperty')( items, {id:id} );
	},
	get: function(){
	return items;
	},
	add: function( item ){
	items.push(item);
	},
	set: function(value){
	items=value;
	}
	};
	})

	.config(function($routeProvider) {
	$routeProvider
	.when('/', {
	controller:'ListController as items',
	templateUrl:'list.html'
	})
	.when('/view/:itemId', {
	controller:'ViewItemController as item',
	templateUrl:'view.html'
	})
	.otherwise({
	redirectTo:'/'
	});
	})

	.controller('ListController', function( $scope,$location, $routeParams, sharedItems ){
	console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
	var items = this;

	sharedItems.mock();

	items.list = sharedItems.get();

	items.additem = function() {
	sharedItems.add({id:0,label:items.newItemLabel, selected:false});
	items.list = sharedItems.get();
	items.newItemLabel = '';
	};
	})

	.controller('ViewItemController', function($scope, $location, $routeParams,sharedItems){
	console.log("$scope", $scope, '$location',$location,'$routeParams',$routeParams);
	//console.log( $routeParams.itemId, sharedItems.get(), sharedItems.getById( $routeParams.itemId ) );
	var item = this; // sharedItems.getById( $routeParams.itemId );
	item.detail = sharedItems.getById( $routeParams.itemId )[0];
	console.log(item);
	// item.id =
	});
	<html lang="en" ng-app="SampleApp">
	<head>
	<meta name="viewport" content="initial-scale=1" />
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</head>
	<body>

	<h1>Sample App</h1>
	<div ng-view></div>


	</body>
	</html>
	<h2>List</h2>
	<table>
	<thead>
	<th>ID</th>
	<th>Label</th>
	<th>Checked</th>
	</thead>
	<tbody ng-repeat=" item in items.list">
	<tr>
	<td>{{item.id}}</td>
	<td><a ng-href="#/view/{{item.id}}">{{item.label}}</a></td>
	<td><input type="checkbox" ng-model="item.selected"></td>
	</tr>
	</tbody>
	</table>
	<form ng-submit="items.additem()">
	<input type="text" ng-model="items.newItemLabel" size="30"
	placeholder="add new todo here">
	<input class="btn-primary" type="submit" value="add">
	</form>
	<h2>View</h2>
	<table>
	<thead>
	<th>ID</th>
	<th>Label</th>
	<th>Checked</th>
	</thead>
	<tbody>
	<tr>
	<td>{{item.detail.id}}</td>
	<td><a ng-href="#/view/{{item.detail.id}}">{{item.detail.label}}</a></td>
	<td><input type="checkbox" ng-model="item.detail.selected"></td>
	</tr>
	</tbody>
	</table>
	<a href="#/">Back</a>