controller

var pocketClock = angular.module('innit.apps.pocketclock.controllers',[])

pocketClock.controller('ClockFlowController',function($scope){

	$scope.cards = [

	//section 1
	[
	//card 1-1
	{
		cardType : 'punch',
		showHeader :true, 
		headerText : 'Header1-1', 
		bodyText : 'bodyTextOne',
		actions : [
		{
			actionText : 'Action 1',
			onClick : function(){
				console.log('clicky')
			}

		},
		{
			actionText : 'Action 2',
			onClick : function(){
				console.log('clocky')
			}

		}]
	},
	//card 1-2
	{
		cardType : 'simple',
		showHeader :true,
		headerText : 'Header1-2',
		bodyText : 'bodyTextOne'
	}


	],

	//section2
	[
	{
		cardType : 'simple',
		showHeader :true,
		headerText : 'Header2',
		bodyText : 'bodyTextTwo'
	}
		]
	]




})

directives.js

InnitCard.directive('innitCard', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {

        var getTemplate = function(cardType) {
            var templateLoader,
            baseUrl = 'partials/cards/',
            templateMap = {
                simple: 'simple.html',
                punch: 'punch.html'
            };

            var templateUrl = baseUrl + templateMap[cardType];
            templateLoader = $http.get(templateUrl, {cache: $templateCache});

            console.log(templateUrl)
            return templateLoader;

        }

        var linker = function(scope, element, attrs) {
          var cardType = scope.cardType
            var loader = getTemplate(cardType);

            var promise = loader.success(function(html) {
                element.html(html);
            }).then(function (response) {
                $compile(element.contents())(scope)
            });
        }

        var controller = function($scope,$element){
          var cards = $scope.cards
          var card = $scope.card
        
          $scope.select = function(card) {

            
                angular.forEach(cards, function(_card) {
                  _card.selected = false;
                  
                  console.log(_card)

                });
                card.selected = true;  
                console.log(card)
          }

         $scope.mouseOver = function(card){
           
           console.log("hovering...")
           console.log(card)
           angular.forEach(cards, function(_card) {
                 _card.focused = false;
           });
           card.focused = true
         }
         $scope.mouseLeave = function(card){
           card.focused = false
         }

         $scope.save = function(card){
          console.log("saving...")
          card.editable = false
        }

        $scope.delete = function (card) {
          var card_to_delete = $scope.cards[card];

          API.DeletePerson({ id: card_to_delete.id }, function (success) {
            $scope.cards.splice(card, 1);
          });
        };

        
        
       }

        return {
            restrict: 'E',
            scope: {
                card:'=',
                cardType: "=",
                cards : "="
            },
            link: linker,
            controller: controller
        }

}])




InnitCard.directive('innitCardList', function() {
    return {
      templateUrl : 'partials/innitCardList.html',
	  replace: true,
	  transclude: true,
      restrict: 'E',
      scope: {
      	cards: "=collection",
      	cardType : '@',
      	onSelect : "="
      },
      controller: function($scope, $element) {
        var cards = $scope.cards


        console.log(cards.length + " cards found:")
        console.log(cards)
        // $scope.selectCard = function(card) {
        //   angular.forEach(cards, function(card) {
        //     card.selected = false;
        //     card.focused = true;
        //   });
        //   card.selected = true;
        //   console.log(card.selected)
        // }

        $scope.createCard = function() {
         	console.log("creating a new card")
         	$scope.newCard = {}
         	if(cards.length > 0){
         		cards.unshift($scope.newCard);
         		$scope.newCard.editable = true;
         	}

    
        }



        $scope.addCardToList = function(card){
        	console.log('adding the card to the list...')
        	if(cards.length > 0){
         		cards.push(card);
         	}
        }

        



      }
    };
})

innitCardList.html

<div class="row" >
<!-- 	<a class="btn btn-primary btn-block" ng-click="createCard()">Create Card</a> -->
	<!-- <ul class="list-group" id="card-list">
	    <li class="list-group-item animate-repeat" ng-repeat="card in cards | limitTo:10">
	        <innit-card card="card" card-type="cardType"></innit-card>
	    </li>
	</ul> -->
	<dt ng-repeat-start="section in cards"><div ng-if="section.showHeader">{{section.headerText}}</div></dt>
		<dd ng-repeat="card in section"><innit-card card="card" card-type="card.cardType"></innit-card></dd>
	<dd ng-repeat-end>
		{{section.footerText}}
	</dd>


</div>

punchCard.html

<div class="panel panel-default">
	
	<div class="panel-body">
		<p class="lead">{{card.headerText}}</p> 
		<p>{{card.bodyText}}</p>
		
	</div>
	
	<div ng-repeat="cardAction in card.actions" class="list-group">
		<a ng-click="cardAction.onClick()" class="list-group-item btn-link">{{cardAction.actionText}}</a>
	</div>

</div>

simpleCard.html

<div class="card" ng-mouseover="mouseOver(card)" ng-mouseleave="mouseLeave(card)" ng-hide="card.editable">
   <div class="card-heading image">
      <img src="holder.js/46x46" alt=""/>
      <!-- <span class="glyphicon glyphicon-wrench"></span> -->
      <div class="card-heading-header">
         <h3 ng-bind="card.descriptionText">Service Item</h3>
         <span>Job Name</span>
      </div>
      <button class="btn btn-success btn-small pull-right" ng-click="select(card)" ng-show="card.focused">Select</button>
   </div>
</div>

<div class="card" ng-show="card.editable">
   <div class="card-body">
      <form role="form">
         <!-- <button class="btn btn-link btn-xs pull-left" ng-click="delete(card)">X</button> -->
         <div class="form-group">
            <!-- <label for="serviceItemSelect">Select an Operation </label> -->
            <select id="serviceItemSelect" class="col-xs-12" ng-model="serviceItem" ng-options="serviceItem.description for serviceItem in serviceItems" ng-required></select>
         </div>
         <button class="btn btn-link pull-left" ng-click="showJobSelect = true" ng-show="selectedServiceItem"><span class="glyphicon glyphicon-plus"></span> Add a Project</button>
        <div class="form-group" ng-show="showJobSelect">
         <!--  <label for="jobSelect">Job</label> -->
          <select id="jobSelect" class="col-xs-12" ng-model="job" ng-options="job.name for job in jobs" ng-required></select>
        </div>
        <!-- <div class="checkbox">
          <label>
            <input type="checkbox"> Save as Favorite
          </label>
        </div> -->
      </form>
   </div>
   <div class="card-actions animate-show" >
      <button type="submit" class="btn btn-success btn-small pull-right" ng-click="save(card)" ng-hide="!selectedServiceItem">Submit</button>    
   </div>

</div>