getting error to pass parameter through $state.go

Question

I am new in angular js. I got some issue to work with $state.go. I have a text field and a button in my HeaderController. In this button I have called a function in ng-click.I want to clear an array on this button click and want to go to SearchController using the parameter. where I take the text field value as the parameter. My array is cleared using the function but for state change I got an error

angular.js:9419 Error: Could not resolve 'search' from state 'home'
    at Object.y.transitionTo (angular-ui-router.min.js:7)
    at Object.y.go (angular-ui-router.min.js:7)
    at Scope.$scope.searchFn (headerControllers.js:75)
    at angular.js:10204
    at angular.js:17971
    at Scope.$eval (angular.js:11961)
    at Scope.$apply (angular.js:12061)
    at HTMLButtonElement.<anonymous> (angular.js:17970)
    at angular.js:2613
    at forEach (angular.js:310)

I have the config code

 angular.module('movieApp').config(['$urlRouterProvider','$stateProvider', '$locationProvider', function($urlRouterProvider,$stateProvider,$locationProvider){
        $stateProvider.state('home',{
            url : '/home',
            templateUrl : 'app/components/home/home.html',
            controller : 'HomeController',
        }).state('search.id',{
            url : '/search',
            params: {
                param1: null
            },
            templateUrl : 'app/components/search/search.html',  
            controller : 'SearchController',    
        }).state('header',{
            template : '<main-header></main-header>',           
        }).state('category',{
            url : '/category/:id',
            templateUrl : 'app/components/category/category.html',  
            controller : 'CategoryController',  
        }).state('yearsort',{
            url : '/yearsort/:time_id/:page_id',
            template : '<year-sort></year-sort>',   
        }).state('budgetsort',{
            url : '/budgetsort/:price_id/:page_id',
            template : '<budget-sort></budget-sort>',   
        });
        $urlRouterProvider.otherwise('home'); 
}]);

My header controller is

angular.module('movieApp.header.controller', []).controller('HeaderController', ['$scope','HomeFactory','$timeout','$state',function($scope,HomeFactory,$timeout,$state){

    $scope.header = "home page";
    $scope.categoryList = [];

    var callApi = function(){
                var apidata = localStorage.getItem('apiData');
                apidata = JSON.parse(apidata);
                $scope.allMovieList = apidata;
                movieCatgFn(apidata);
                searchList(apidata);
    }
    var allMovieList = callApi();
    function movieCatgFn(data){
        var splitToAry = [];
        for(var i=0; i<data.length; i++){
            splitToAry.push(data[i].genres.split("|"));
        }
        var fullArray = [];
        $scope.genersAry = [];
        fullArray=splitToAry.join().split(',');
        for(var j=0; j<fullArray.length; j++){
            var count = 0;
            $scope.genersAry.push(fullArray[j]);
            for(var k=0; k<$scope.genersAry.length; k++){
                if(fullArray[j]==$scope.genersAry[k]){
                    count+=1;
                }
                if(count>1){
                    $scope.genersAry.pop();
                }
            }
        }   
    }

    function searchList(data){
        $scope.changeFn = function(userData){
            if(userData!=null || userData!= ""){
                $scope.searchCatgAry = [];
                for(var i=0; i<data.length; i++){
                    var str = data[i].movie_title.toLowerCase().trim();
                    var search = userData.toLowerCase().trim();
                    if(str.search(search) != -1){
                        $scope.searchCatgAry.push(data[i].movie_title);
                    }
                }
                if(userData==null || userData== ""){
                    $scope.searchCatgAry = [];
                }
            }
        }
    }

    $scope.serchAutocatg = function(data){
        console.log(data);
        $scope.searchName = data;
        $scope.searchCatgAry = [];
    }

     $scope.searchFn = function(searchName){
        console.log('hello: '+searchName);
        $scope.searchCatgAry = [];
        $state.go('search',{param1: searchName});
    }    

 }]);

Header html is

<header ng-controller="HeaderController"> 
<form class="navbar-form navbar-right">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search" ng-model="searchName" ng-change="changeFn(searchName)">
  </div>
<button type="button" class="btn btn-default" ng-click="searchFn(searchName)">Submit</button>
</form>

My search controller is

angular.module('movieApp.search.controller', []).controller('SearchController', ['$scope','movieAPI','HomeFactory','$timeout','$state',function($scope,movieAPI,HomeFactory,$timeout,$state) {

    $scope.searchName = $state.params.searchId;
    $scope.searchCatgAry = [];

    var callApi = function(){
                var apidata = localStorage.getItem('apiData');
                apidata = JSON.parse(apidata);
                $scope.allMovieList = apidata;
                searchFieldFn(apidata);
    }
    var allMovieList = callApi();

    function searchFieldFn(data){
        for(var i=0; i<data.length; i++){
            var str = data[i].movie_title.toLowerCase().trim();
            var search = $scope.searchName.toLowerCase().trim();
            console.log(search);
            if(str.search(search) != -1){
                $scope.searchCatgAry.push(data[i]);
            }
        }
        console.log($scope.searchCatgAry);
        $scope.searchName = "";
        console.log('$scope.searchName: '+$scope.searchName);
    }



 }]);

Answer 1

The issue has been solved. There are few changes in config.js, header controller and in search controller.

In config.js I have to write the state as:

.state('search',{
        url : '/search/:id',
        templateUrl : 'app/components/search/search.html',  
        controller : 'SearchController',    
    })

In header controller for $state.go I have to write

 $scope.searchFn = function(searchName){
    $state.go('search',{id: searchName},{reload:true});
}

And in search controller I have to write code to access the parameter as

$scope.searchName = $state.params.id;