AngularJS 1.3.x

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

myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
    
    /*
      Application Routing
     */
    $routeProvider.when('/search/', {
      templateUrl: 'page-search.html',
      controller: 'SearchController',
      reloadOnSearch: false
    }).otherwise({
      templateUrl: 'page-default.html'
    });
    
    // $locationProvider.html5Mode(true);
}]);

myApp.factory('SearchService', ["$location", "$http", function($location, $http) {
  
  var SearchService;
  SearchService = {};
  
  // The array that will contain search results
  SearchService.arrSearchResults = [];
  
  // The search term (for decoration)
  SearchService.searchTerm = "";
  
  // Control if user searched recently
  SearchService.userSearched = false;
  
  // Control the state of the search
  SearchService.typeOfSearch = "web";
  
  // Switch the search type/state
  SearchService.switchSearchType = function(aSearchType) {
    SearchService.typeOfSearch = aSearchType;
    
    // Check if user has a search term, if true then rerun search
    if (SearchService.searchTerm !== "") {
      console.log("rerunning search!");
      SearchService.arrSearchResults = [];
      SearchService.submitSearch(SearchService.searchTerm);
    }
  };
  
  // Clear the search
  SearchService.clearSearch = function() {
    SearchService.searchTerm = "";
    SearchService.arrSearchResults = [];
    SearchService.userSearched = false;
  };
  
  // Search function
  SearchService.submitSearch = function(aSearchTerm) {
  
    // Make sure aSearchTerm has content (always good to double check)
    if(aSearchTerm !== "") {
  
      // Alter URL to show new request
      $location.search('q', aSearchTerm);
      SearchService.searchTerm = aSearchTerm; 
      
      // Determine URL to request based on search type/state
      requestUrl = "";
      if (SearchService.typeOfSearch == "web") {
        requestUrl = "results-web.json";
      }
      else if (SearchService.typeOfSearch == "image") {
        requestUrl = "results-image.json";
      } 
      
      console.log("Making request to ", requestUrl);
      
      // Make a GET request to your URL that will 
      // return data for you to populate
      $http.get(requestUrl).
        success(function(data, status, headers, config) {
  
  
          SearchService.userSearched = true;
          console.log(data, status, headers, config);
          
          // this callback will be called asynchronously
          // when the response is available
  
          // Assuming the data returned is a list of items
          // or object items
          // (i.e. [ "Search Result1", "Search Result2", ... ]
          SearchService.arrSearchResults = data;
  
        }).
        error(function(data, status, headers, config) {
  
          SearchService.userSearched = true;
          console.log(data, status, headers, config);
          
          // called asynchronously if an error occurs
          // or server returns response with an error status.
  
          // Empty the array of search results 
          // to show no results
          SearchService.arrSearchResults = [];
        });
    }
  }
  
  return SearchService;
}]);

myApp.controller('ApplicationController', ['$scope', 'SearchService', 
function($scope, SearchService) {

  // Create a reference to the SearchService and add it to the 
  // $scope so it will be available on the page
  $scope.searchService = SearchService;
  
  $scope.user = "Anon";

}]);

myApp.controller('SearchController', ['$scope', 'SearchService', '$http', '$location', 
function($scope, SearchService, $http, $location) {

  // Your search input
  $scope.blab = "";
  
}]);

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    
    <link rel="stylesheet" href="style.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ApplicationController">
    <p>Greetings {{user}}!</p>
    
    <h2>Page:</h2>
    <!-- ngView -->
  	<div style="border-bottom:1px solid #ccc;padding-bottom:20px;" role="main" data-ng-view></div>
  
  	<!-- Search Results -->
  	<h2>Search Results</h2>
  	<p>Search Term: {{searchService.searchTerm}}</p>
  	<p>Search State: {{searchService.typeOfSearch}}</p>
  	
  	<ul class="search-menu">
  	  <li class="search-menu-item" ng-class="{'active': searchService.typeOfSearch=='web'}" ng-click="searchService.switchSearchType('web')">WEB</li>
  	  <li class="search-menu-item" ng-class="{'active': searchService.typeOfSearch=='image'}" ng-click="searchService.switchSearchType('image')">IMAGE</li>
  	</ul>
  	
  	<h3>{{searchService.typeOfSearch}} Results</h3>
  	<div data-ng-if="searchService.typeOfSearch=='web'" data-ng-repeat="searchItem in searchService.arrSearchResults">
  	  <p style="background-color:blue;padding:10px;border-bottom: 2px solid #000">Search Result: <br/>{{searchItem}}</p>
  	</div>
  	<div data-ng-if="searchService.typeOfSearch=='image'" data-ng-repeat="searchItem in searchService.arrSearchResults">
  	  <img style="background-color:red;padding:10px;border-bottom: 2px solid #000" ng-src="{{searchItem}}" title="Search Item" alt="image search item" />
  	</div>
  	
  	<div ng-if="searchService.userSearched == true && searchService.arrSearchResults.length == 0">
  	  <p>No results found</p>
  	</div>
    
  </body>

</html>

/* Put your css in here */
.search-menu li {
  display: inline-block;
}

.search-menu .active {
  font-weight: bold;
}

.search-menu-item {
  background-color: #ddd;
  padding: 6px;
  cursor: pointer;
  font-weight: normal;
}

.search-menu-item:hover {
  background-color: #eee;
}

<h1>Default Page</h1>
<p><a href="#search">Click to search!</a>

<form name="search" role="form">
    <div class="input-group input-group-search">

        <input type="text" class="form-control" ng-model="blab" name="q" required>
        <span class="input-group-addon">
            <button class="btn-search" ng-disabled="search.$invalid" ng-click="searchService.submitSearch(blab)">
                Search<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
            <button class="btn" ng-click="searchService.clearSearch()">
                Clear
            </button>
        </span>
        <input type="hidden" name="mode" value="web"/>
    </div>
</form>

[
  "item1",
  "item2",
  "item3",
  "item4",
  "item5"
]

[
  "http://placehold.it/100x100",
  "http://placehold.it/120x120",
  "http://placehold.it/140x140",
  "http://placehold.it/160x160",
  "http://placehold.it/180x180"
]

#AngularJS Google Search Example#
See (http://stackoverflow.com/questions/28505183/google-like-search-box-with-an-angularjs-directive/)

This demonstrates a basic search example which has a main application controller, and a page controller.
Both share a service called SearchService which handles the current search type/state, and the search function.

This also demonstrates the ability to switch between "Tabs" that is, switching between a web or image search.

- Manbearpixel
- http://twitter.com/manbearpixel
- http://codepen.io/Manbearpixel/