Untitled

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

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="angular-animate@*" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-animate.js"></script>
    <script data-require="angular-resource@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-resource.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h3>This works</h3>
    <div class="content" ng-controller="MainCtrl">
      <div class="details" ng-show="showDetails">
        <label for="">Seach Names</label>
        <input type="text" ng-model="searchText" />
      </div>
      <a ng-click="showDetails = ! showDetails"> Click Me</a>
      <div ng-repeat="friend in friends | filter:searchText | limitTo: 5">
        {{friend.name}}
      </div>
    </div>
    <h3>This doesn't as search is outside 'MainCtrl'</h3>
    <p>How can I get this to work?</p>
    <div class="details" ng-show="showDetails">
      <label for="">Seach Names</label>
      <input type="text" ng-model="searchText" />
    </div>
    <div class="content" ng-controller="MainCtrl">
      <a ng-click="showDetails = ! showDetails"> Click Me</a>
      <div ng-repeat="friend in friends | filter:searchText | limitTo: 5">
        {{friend.name}}
      </div>
    </div>
  </body>

</html>

var app = angular.module('plunkr', ['ngResource','ngAnimate','ui.bootstrap']);

app.factory('friendsFactory', function($resource) {
  return $resource('friends.json');
});

app.controller('MainCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.query();
});

/* Styles go here */
.ng-hide-add, .ng-hide-remove {
  display: block !important;
}

.details{
  background: tomato;
  padding: 0 15px;
  height: 40px;
  padding-top: 4px;
  overflow: hidden;
  font-weight: bold;
  color: #f7f7f7;
  
  transition: all 600ms ease-in-out;
}

.details.ng-hide {
  height:0;
}

input{
  height:32px;
  color: #555;
  outline:0;
  border:0;
  border-radius: 4px;
}

[
  {"name":"Jack"},
  {"name":"Tim"},
  {"name":"Stuart"},
  {"name":"Tom"},
  {"name":"Frank"},
  {"name":"Ted"},
  {"name":"Michael"},
  {"name":"Albert"},
  {"name":"Tobby"},
  {"name":"Mick"},
  {"name":"Nicholas"},
  {"name":"Jesse"},
  {"name":"Lex"},
  {"name":"Robbie"},
  {"name":"Jake"},
  {"name":"Levi"},
  {"name":"Edward"},
  {"name":"Neil"},
  {"name":"Hugh"},
  {"name":"Hugo"},
  {"name":"Yanick"},
  {"name":"Matt"},
  {"name":"Andrew"},
  {"name":"Charles"},
  {"name":"Oliver"},
  {"name":"Robin"},
  {"name":"Harry"},
  {"name":"James"},
  {"name":"Kelvin"},
  {"name":"David"},
  {"name":"Paul"}
]