Legend of Korra Benders

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
    
  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />

  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
  </head>
  <body>
  


  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
          <li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
          <li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>



    <div class="header" ng-controller="headerController">
      <h1><a ng-click="goHome()">Legend of Korra Benders</a></h1>
    </div>
    
    <ng-view></ng-view>
  <!-- Footer -->

  <footer class="footer">
    <div class="container">

      <span style="float:left;">©2015 Bryant Tunbutr</span>

      <span style="float:right;">
            <a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
            <a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
    </div>
    <!-- end Container-->
  </footer>


  </body>
</html>


var myApp = angular.module('myApp', []);

myApp.factory('Items', ['$http', function($http){
  return {
    get: function(callback){
      $http.get('items.json').success(function(data){
        callback(data);
      })
    }
  }
}]);

myApp.factory('Categories', ['$http', function($http){
  return {
    get: function(callback){
      $http.get('categories.json').success(function(data){
        callback(data);
      })
    }
  }
}]);

// Config and Routes 
myApp.config(function($routeProvider){
  $routeProvider
		.when('/', {
				templateUrl:"home.html"
		})
		.when('/item/:id', {
				templateUrl:"item.html"
		})
})

myApp.controller('headerController', function($scope, $location) {
  $scope.goHome = function () {
    $location.path('/');
  };
})


 
function Ctrl($scope) {
  $scope.greeting = 'hello';
}

// Controllers
myApp.controller('ItemController', function($scope, $route, $location, $http, Items){
	
  Items.get(function(response){
    $scope.items = response;
  });
  
  // Update this value dynamically - onclick
  $scope.filters = "food";

  $scope.viewDetail = function(item) {
		$location.path('/item/' + item.id);
	}
	
})	


myApp.controller('ListController', function($scope, $route, $location, $http, Categories){
  
  $scope.sendCategory = function(category) {
    // How can I pass this value to ItemController?
     $scope.search =category.name;
  };
  
  
})	


myApp.controller('CategoryController', function($scope, $route, $location, $http, Categories){
  
  Categories.get(function(response){
    $scope.categories = response;
  });
 
	
})	


myApp.controller('ItemDetailController', function($scope, $route, $location, $http, Items){
    Items.get(function(response){
    $scope.items = response; 
  
    if ($route.current.params.id) {
      angular.forEach($scope.items, function (v, k) {
        if (v.id == $route.current.params.id) {
          $scope.currItem = $scope.items[k];
          return false;
        }
      });
    }
  });
})

 .categories {
   /* margin: 0 0 10px; */
   margin-left: auto;
   margin-right: auto;
 }
 
 .categories ul {
   /*   margin-left: auto;
margin-right: auto; */
   margin: 0 auto 0 auto;
   padding: 0;
   width: 100px;
   background: #f0f0f0;
   border: solid 1px #333;
   text-align: center;
list-style-type: none;
 }
 
 img {
   max-width: 250px;
 }
 
 .footer {
   height: 40px;
   background-color: transparent !important;
 }
 
 .plain-header {
   a {
     color: #428bca;
   }
   a:hover,
   a:focus {
     background-color: #FFF;
     color: #0085a1;
   }
   position: relative;
   padding: 30px 15px;
   text-align: center;
   font-size: 20px;
 }
 
 #home_link {
   font-size: 1.7em;
   color: white;
   text-transform: uppercase;
   letter-spacing: -1px;
   padding: 9px 15px;
   font-weight: bold;
 }
 
 #logo {
   color: #428bca;
   position: relative;
   text-align: center;
   font-size: 20px;
   padding: 30px 15px;
   text-align: left;
   :hover, :focus {
     background-color: #eeeeee;
     color: #0085a1;
   }
 }
 
 #logo:hover,
 #logo:focus {
   background-color: #eeeeee;
   color: #0085a1;
 }
 
 .footer {
   height: 40px;
   background-color: transparent;
 }
 
 h1,
 h3 {
   text-align: center;
 }
 
 .centering {
   text-align: center;
 }
 
 .center-block {
   float: none !important
 }

<div ng-controller="ItemDetailController">
    <div class="container">

  <div class="item centering">
		<h2>{{currItem.title}}</h2>	
    <p>{{currItem.description}}</p>
    <img src="{{currItem.imageURL}}" style="max-width:500px;">
	</div>			
</div>
</div>

<!DOCTYPE html>

  <div ng-controller="ListController" class="center-block">
    <div class="categories" ng-controller="CategoryController">
      <ul ng-repeat="category in categories">
        <li ng-click="sendCategory(category)">{{category.name}}</li>
      </ul>
    </div>


  <div class="container">
    <div class="centering" ng-controller="ItemController">
      <div class="itemList ">
        <div class="item" ng-repeat="item in items | filter:search | orderBy:sort">
          <h3 ng-click="viewDetail(item)">{{item.title}}</h3>
          <p>{{item.description}}</p>

          <p>
            <a ng-click="viewDetail(item)"><img src="{{item.imageURL}}"></a>
          </p>
        </div>


      </div>
    </div>
  </div>
</div>

[
  {
    "id": 1,
    "title": "Korra",
    "description": "The Avatar",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/9/9a/Korra_(Season_4)_appearance.jpg",
    "category": "Air Bender, Water Bender, Earth Bender, Fire Bender"
  },
  {   
    "id": 2,
    "title": "Mako",
    "description": "Formerly Bud Bundy",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/3/35/Mako_%28The_Legend_of_Korra%29.jpg",
    "category": "Fire Bender"
  },
  {
    "id": 3,
    "title": "Bolin ",
    "description": "Nuktuk",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/e/e2/Bolin_%28The_Legend_of_Korra%29.jpg",
    "category": "Earth Bender"
  },
  {
    "id": 4,
    "title": "Asami Sato",
    "description": "Basically Batman",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/0/02/Asami-neutral-book1.png",
    "category": "Non Bender"
  },
  {   
  },
  {
    "id": 6,
    "title": "Tenzin ",
    "description": "Son of Aang",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/8/88/Tenzin_%28The_Legend_of_Korra%29.jpg",
    "category": "Air Bender"
  },
  {
    "id": 7,
    "title": "Lin Beifong",
    "description": "That lady is my hero",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/8/83/Lin_Beifong.png",
    "category": "Earth Bender"
  },
  {
    "id": 8,
    "title": "Kuvira",
    "description": "Dictator",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/e/ec/Kuvira.png",
    "category": "Earth Bender"
  },
  {
    "id": 9,
    "title": "Zaheer",
    "description": "The natural order is disorder",
    "imageURL":"https://upload.wikimedia.org/wikipedia/en/4/43/Zaheer_-_character_from_the_Legend_of_Korra.jpg.png",
    "category": "Air Bender"
  }
]

[
  {
    "id": 1,
    "name": "Air Bender"
  },
  {   
    "id": 2,
    "name": "Water Bender"
  },
  {
    "id": 3,
    "name": "Earth Bender"
  },
  {
    "id": 4,
    "name": "Fire Bender"
  },
  {
    "id": 5,
    "name": "Non Bender"
  }
]