title: Calling an angularjs ui-router state from within a controller
body: <p>I use the angularjs <strong>ui-router</strong> to establish the various states within an app. While I know I can go to the state from a link in the html (via <strong>ui-sref</strong>), is it possible to go to the state from within a controller?</p>
  
  <p>The code snippets below are a simple angularjs app to help illustrate my point. </p>
  
  <p>In the example below, I have two states:</p>
  
  <ol>
  <li>There is a state called <code>home</code> that is a simple form containing a text input field and a button that calls a search function in the controller.</li>
  <li>There is a state called <code>search</code> that takes a query parameter called <strong>text</strong>. Its controller calls a service that performs a search based on the text. The results are displayed to the page.</li>
  </ol>
  
  <p>First is the module's initiation.</p>
  
  <pre><code>var app = angular.module('example', [
      'ui.router'
    ]);
  </code></pre>
  
  <p>Below is the configuration of the ui-routing states as explained earlier.</p>
  
  <pre><code>app.config(
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider.
        state('home', {
          url: '/',
          template: '&lt;input ng-model="text" type="text" placeholder="Query Text"&gt;' +
            '&lt;button type="button" ng-click="search()"&gt;Search&lt;/button&gt;',
          controller: 'SearchFormController'
        }).
        state('search', {
          url: '/search?text',
          template: '&lt;pre&gt;{{results | json}}&lt;/pre&gt;',
          controller: 'SearchController'
        });
    });
  </code></pre>
  
  <p>The <strong>SearchFormController</strong> controls the form input of search. This controller just forwards the form input to the <code>search</code> state. <em>Is it possible to reference the <strong>search</strong> state as opposed to constructing a URL and calling <strong>$location.path</strong>?</em></p>
  
  <pre><code>app.controller('SearchFormController', 
    function($scope, $location) {
      $scope.text = '';
      $scope.search = function() {
        // Can I use the 'search' state here instead of 
        // constructing a url and calling $location.path?
        $location.path('/search?text='+ encodeURIComponent($scope.text));
      };
    });
  </code></pre>
  
  <p>The controller of the search, <strong>SearchController</strong>, would look something like below. It would take the stateParams (i.e., query parameters) to issue an <strong>$http</strong> call.</p>
  
  <pre><code>app.controller('SearchController',
    function($scope, $stateParams, $http) {
      $scope.results = [];
      asUrl = function(resourceUrl, queryParams) {
        // do stuff and return http url
      };
      $http.get(asUrl("/someServiceUrl/search", $stateParams))
        .success(function(data, status) {
          $scope.results = data;
        })
        .error(function(data, status) {
          // display an error message
        });
    });
  </code></pre>
  
  <p>Again, in the <strong>SearchFormController</strong>, is it possible to reference the <strong>search</strong> state from the config by name? For example, in an html page I could have a link like this: <code>&lt;a ui-sref="search({text:Foo})"&gt;Search where text=Foo&lt;/a&gt;</code> where the <code>search</code> state is referenced by name and passes in the parameters. Can something similar be invoked from a controller (by name, passing in parameters)?</p>