JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<div ng-app="myApp" ng-controller="mainController">
  <div > <!-- ng-controller="navBar" has removed from here -->
    <button ng-click="routeToSearchPage()">Click</button>
    {{filteredModules}}
  </div>
</div>

JavaScript

angular.module("myApp",["ngRoute"])
.config(function($routeProvider) {
$routeProvider
.when("/ERPdocumentation/", {
                templateUrl : function(params){
                    var template = "";
                    return template
                 },
                controller: "navBar",
                resolve: {
                    filteredModules: function (searchForService) {
                       return searchForService.getfilteredModules();
                    }
                }
            });
})
.controller("mainController",function(){
  // code here
})
.controller("navBar", function ($scope,filteredModules) {
    $scope.filteredModules = filteredModules;
    $scope.routeToSearchPage = function(){
        console.log("route") // nothing happened here        
    };
})
.factory("searchForService", function(){
 return {
        getfilteredModules: function(){
           // code here to get search results 
					return "HELLO"
        }
   }
 })