Ion nav buttons not showing

I am trying to enable an "Edit" button for a specific tab view in the nav-bar using <ion-nav-buttons> but they don't show up. The documentation mentions that <ion-nav-buttons> needs to be a child of <ion-view> which it is, so I am a bit confused as to why it's not working. I have read that people have had problems with the nav-buttons inside of an abstract view, but spots.html is not an abstract view.

Below is the nav button that is not working inside of spots.html.

<ion-view title="Spots">
    <ion-nav-buttons side="right">
        <button class="button button-clear button-positive">Grid</button>
    </ion-nav-buttons>
    <ion-content>
        <div ng-hide="gridView" class="list">
            <a ng-repeat="spot in spots" ui-sref="tab.spot-detail({ id:{{spot.id}} })" class="item item-thumbnail-left">
                <img ng-src="{{ spot.thumb_url }}">
                <h2>{{ spot.name }}</h2>
            </a>
        </div>
    </ion-content>
</ion-view>

tabs.html

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button class="button-clear">
    <i class="ion-chevron-left"></i>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-tabs class="tabs-icon-top tabs-striped tabs-color-positive">

  <!-- Spots Tab -->
  <ion-tab title="Spots" icon="icon ion-ios7-world" href="#/tab/spots">
    <ion-nav-view name="tab-spots"></ion-nav-view>
  </ion-tab>

  <!-- Upload Tab -->
  <ion-tab title="Upload" icon="icon ion-ios7-camera" href="#/tab/upload">
    <ion-nav-view name="tab-upload"></ion-nav-view>
  </ion-tab>

  <!-- Friends Tab -->
  <ion-tab title="Friends" icon="icon ion-ios7-people" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

And the relevant portion of my router file, app.js

 $stateProvider

  .state('welcome', {
    url: "/welcome",
    controller: 'WelcomeCtrl',
    templateUrl: "templates/welcome.html",
    data: {
      requiresLogin: false
    }
  })

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  .state('tab.spots', {
    url: '/spots',
    views: {
      'tab-spots': {
        templateUrl: 'templates/tab-spots.html',
        controller: 'SpotsCtrl'
      }
    },
    data: {
      requiresLogin: true
    }
  })

Relevant part of my index.html

<body ng-app="droppin">
  <ion-nav-view></ion-nav-view>
</body>

When you say "not working", it's quite vague for us (at least me). Do say something like "not visible", "visible not clickable", "clickable but no effect", "clickable with wrong effect", etc.

One obvious mistake I can see from the code is ui-sref="tab.spot-detail({ id:{{spot.id}} })". You should omit the {{}} inside evaluation.