I have following three buttons on top of my page with input box underneath it.

<div>

  <form>

          <div>

              Enter Show Name<input type=text ng-model=showName />

          </div>

      </form>

</div>

<div>

<button ng-click=href=/api/renameShow>Rename Show</button>

<button ng-click=href=/api/updateShow>Update  Show</button>

<button ng-click=href=/api/checkShow>Check   Show</button>

</div>

My module code with routes is

    var showApp = angular.module(showApp, [ngRoute, ngResource, ui]).

    config(function ($routeProvider, $locationProvider) {

        $routeProvider.

            when('/',

            {

                controller: '',

                templateUrl: 'main.html'

            }).

            when('/api/renameShow', { controller: 'renameShowCtrl', templateUrl:     '/templates/renameShow.html' }).

            when('/api/updateShow', { controller: 'updateShowCtrl', templateUrl:     '/templates/updateShow.html' }).

when('/api/checkShow', { controller: 'checkShowCtrl', templateUrl: '/templates/checkShow.html' });

Basically what I am trying to do is that when one of the buttons is clicked the ng-click calls the corrosponding page passing the parameter showName with it.
Please let me know how to fix it. Thanks