cpoDesign/app.js

## app.js
var app = angular.module('app', ['ngRoute','ng-breadcrumbs']);

app.config(function($routeProvider) {
    $routeProvider.when('/',
        {
            templateUrl: 'templates/list.html',
            controller: 'listCtr',
            label:'Administration'
        })
        .when('/detail/',
        {
            templateUrl: 'templates/detail.html',
            controller: 'detailCtr',
            label: 'Detail'
        })

        .otherwise({ redirectTo: '/' });
});

// controller definition
app.controller('listCtr',
    function priorityCtr($scope, $location){
        $scope.items = [
            {name: 'test', id: '1'},
            {name: 'test 3', id: '3'},
            {name: 'test 2', id: '2'},
        ];
        $scope.openDetail = function(){
            $location.url('/detail/');
        }
    })
    .controller('detailCtr',
    function priorityCtr($scope){
    })
    .controller('HomeController',
    function($scope, breadcrumbs) {
        $scope.breadcrumbs = breadcrumbs;

    });

## detail.html
<h2>Detail</h2>

## index.html
<!DOCTYPE html>
<html ng-app="app">
<head>

    <script src="../js/angular.js" type="application/javascript"></script>
    <script src="../js/angular-route.js" type="application/javascript"></script>
    <script src="ng-breadcrumbs.js"></script>
    <script src="app.js"></script>
    </head>
<body ng-controller="HomeController">
<div id="breadcrumbs">
<ol>
    <li ng-repeat="breadcrumb in breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
        <a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
        <span ng-if="$last" ng-bind="breadcrumb.label"></span>
    </li>
</ol>
</div>
<div style="clear: both">

<ng-view ></ng-view>
</div>
  </body>
</html>

## list.html
<h2>list of all items</h2>

<div ng-repeat="item in items">
    <h2>{{item.name}}</h2>
    <p><button ng-click="openDetail()">detail</button></p>
</div>

## ng-breadcrumbs.js
/**
 * ng-breadcrumb.js - v0.1.0 - A better AngularJS service to help with breadcrumb-style navigation between views
 * Based on https://github.com/angular-app/angular-app/blob/master/client/src/common/services/breadcrumbs.js
 *
 * @author Ian Kennington Walter (http://ianvonwalter.com)
 */

/* global angular */
angular
  .module('ng-breadcrumbs', [])
  .factory('breadcrumbs', ['$rootScope', '$location', '$route', function ($rootScope, $location, $route) {
    var BreadcrumbService = {
      breadcrumbs: [],
      get: function(options) {
        this.options = options || this.options;
        if (this.options) {
          for (var key in this.options) {
            if (this.options.hasOwnProperty(key)) {
              for (var index in this.breadcrumbs) {
                if (this.breadcrumbs.hasOwnProperty(index)) {
                  var breadcrumb = this.breadcrumbs[index];
                  if (breadcrumb.label === key) {
                    breadcrumb.label = this.options[key];
                  }
                }
              }
            }
          }
        }
        return this.breadcrumbs;
      },
      generateBreadcrumbs: function() {
        var routes = $route.routes,
            pathElements = $location.path().split('/'),
            path = '',
            self = this;

        var getRoute = function(route) {
          if ($route.current) {
            var param;
            angular.forEach($route.current.params, function (value, key) {
              if (route.indexOf(value) !== -1) {
                param = value;
              }
              if (param) {
                route = route.replace(value, ':' + key);
              }
            });
            return { path: route, param: param };
          }
        };

        if (pathElements[1] === '') {
          delete pathElements[1];
        }

        this.breadcrumbs = [];
        angular.forEach(pathElements, function(el) {
          path += path === '/' ? el : '/' + el;
          var route = getRoute(path);
          if (route && routes[route.path]) {
            var label = routes[route.path].label || route.param;
            self.breadcrumbs.push({ label: label, path: path });
          }
        });
      }
    };

    // We want to update breadcrumbs only when a route is actually changed
    // as $location.path() will get updated immediately (even if route change fails!)
    $rootScope.$on('$routeChangeSuccess', function() {
      BreadcrumbService.generateBreadcrumbs();
    });

    BreadcrumbService.generateBreadcrumbs();

    return BreadcrumbService;
  }]);
	var app = angular.module('app', ['ngRoute','ng-breadcrumbs']);

	app.config(function($routeProvider) {
	$routeProvider.when('/',
	{
	templateUrl: 'templates/list.html',
	controller: 'listCtr',
	label:'Administration'
	})
	.when('/detail/',
	{
	templateUrl: 'templates/detail.html',
	controller: 'detailCtr',
	label: 'Detail'
	})

	.otherwise({ redirectTo: '/' });
	});

	// controller definition
	app.controller('listCtr',
	function priorityCtr($scope, $location){
	$scope.items = [
	{name: 'test', id: '1'},
	{name: 'test 3', id: '3'},
	{name: 'test 2', id: '2'},
	];
	$scope.openDetail = function(){
	$location.url('/detail/');
	}
	})
	.controller('detailCtr',
	function priorityCtr($scope){
	})
	.controller('HomeController',
	function($scope, breadcrumbs) {
	$scope.breadcrumbs = breadcrumbs;

	});
	<!DOCTYPE html>
	<html ng-app="app">
	<head>

	<script src="../js/angular.js" type="application/javascript"></script>
	<script src="../js/angular-route.js" type="application/javascript"></script>
	<script src="ng-breadcrumbs.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="HomeController">
	<div id="breadcrumbs">
	<ol>
	<li ng-repeat="breadcrumb in breadcrumbs.get() track by breadcrumb.path" ng-class="{ active: $last }">
	<a ng-if="!$last" ng-href="#{{ breadcrumb.path }}" ng-bind="breadcrumb.label" class="margin-right-xs"></a>
	<span ng-if="$last" ng-bind="breadcrumb.label"></span>
	</li>
	</ol>
	</div>
	<div style="clear: both">

	<ng-view ></ng-view>
	</div>
	</body>
	</html>
	<h2>list of all items</h2>

	<div ng-repeat="item in items">
	<h2>{{item.name}}</h2>
	<p><button ng-click="openDetail()">detail</button></p>
	</div>
	/**
	* ng-breadcrumb.js - v0.1.0 - A better AngularJS service to help with breadcrumb-style navigation between views
	* Based on https://github.com/angular-app/angular-app/blob/master/client/src/common/services/breadcrumbs.js
	*
	* @author Ian Kennington Walter (http://ianvonwalter.com)
	*/

	/* global angular */
	angular
	.module('ng-breadcrumbs', [])
	.factory('breadcrumbs', ['$rootScope', '$location', '$route', function ($rootScope, $location, $route) {
	var BreadcrumbService = {
	breadcrumbs: [],
	get: function(options) {
	this.options = options \|\| this.options;
	if (this.options) {
	for (var key in this.options) {
	if (this.options.hasOwnProperty(key)) {
	for (var index in this.breadcrumbs) {
	if (this.breadcrumbs.hasOwnProperty(index)) {
	var breadcrumb = this.breadcrumbs[index];
	if (breadcrumb.label === key) {
	breadcrumb.label = this.options[key];
	}
	}
	}
	}
	}
	}
	return this.breadcrumbs;
	},
	generateBreadcrumbs: function() {
	var routes = $route.routes,
	pathElements = $location.path().split('/'),
	path = '',
	self = this;

	var getRoute = function(route) {
	if ($route.current) {
	var param;
	angular.forEach($route.current.params, function (value, key) {
	if (route.indexOf(value) !== -1) {
	param = value;
	}
	if (param) {
	route = route.replace(value, ':' + key);
	}
	});
	return { path: route, param: param };
	}
	};

	if (pathElements[1] === '') {
	delete pathElements[1];
	}

	this.breadcrumbs = [];
	angular.forEach(pathElements, function(el) {
	path += path === '/' ? el : '/' + el;
	var route = getRoute(path);
	if (route && routes[route.path]) {
	var label = routes[route.path].label \|\| route.param;
	self.breadcrumbs.push({ label: label, path: path });
	}
	});
	}
	};

	// We want to update breadcrumbs only when a route is actually changed
	// as $location.path() will get updated immediately (even if route change fails!)
	$rootScope.$on('$routeChangeSuccess', function() {
	BreadcrumbService.generateBreadcrumbs();
	});

	BreadcrumbService.generateBreadcrumbs();

	return BreadcrumbService;
	}]);