AngularJS Material Design element's attributes not working

Question

first time using material design with angular and something is not going right I think.

I'm using the md-tab element and everything is fine until I add the md-border-bottom as in this example in the docs of AngularJS MD : https://material.angularjs.org/#/demo/material.components.tabs

the bottom border just won't appear. here's my template:

<md-tabs md-border-bottom>
    <md-tab ng-repeat="league in leagues" label="{{league.caption}}">
       {{league.caption}}
    </md-tab>
</md-tabs>

and here is the output : http://screencast.com/t/OZrD9xFlQA

I want to mention that this is not the only MD attribute that is not working for me, i assume I've done something wrong, or I'm missing something.

Here is the css and js I linked to my html:

<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>

Thank you very much!

Answer 1

The line on the border appears to come from this CSS rule:

md-tabs[md-border-bottom] md-tabs-wrapper {
  border-width: 0 0 1px;
  border-style: solid;
}

That's in docs.css, which means it's a style provided specifically for the documentation, not to all consumers of the library. If you want a border, you'll have to apply the style yourself.