title: Why are my bootstrap btn-inverted buttons showing up as grey instead of a black gradient?
body: <p>I am using angular, bootstrap and jquery to populate buttons using json. However when i set the styling to style it like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Ca94A.png" alt="inverted bootstrap button"></p>
  
  <p>it shows up like this:</p>
  
  <p><img src="https://i.stack.imgur.com/06LqE.png" alt="faulty inverted bootstrap button"></p>
  
  <p>so how can i get bootstrap to render the buttons correctly?</p>
  
  <p>Stackoverflow code preview isn't working.
  Plunk for project is here:
  <a href="http://plnkr.co/edit/FmK38oyDRZzWOTstoaEo" rel="nofollow noreferrer">http://plnkr.co/edit/FmK38oyDRZzWOTstoaEo</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var bridgeCreek = angular.module('bridgeCreek', []);
  
  bridgeCreek.controller('MyController', ['$scope', '$http', function($scope, $http) {
    $http.get('http://www.zaithe.com/demos/bridgeCreek/js/json/navigation.json').success(function(data) {
      $scope.navigation = data;
    });
  }]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="bridgeCreek"&gt;
    &lt;head&gt;
        &lt;link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /&gt;
    &lt;/head&gt;
    &lt;body ng-controller="MyController"&gt;
        &lt;ul class="nav navbar-right navbar-nav"&gt;
            &lt;li ng-repeat="item in navigation"&gt;
                &lt;button type="button" class="btn btn-inverse btn-sm"&gt;
                    &lt;span ng-class="item.glyph" aria-hidden="true"&gt;&lt;/span&gt; {{item.text}}
                &lt;/button&gt;
            &lt;/li&gt;
    
        &lt;/ul&gt;
        &lt;script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
        
        &lt;script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"&gt;&lt;/script&gt;
        &lt;script src="script.js"&gt;&lt;/script&gt;
        &lt;script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>