why css is not apply on list using JQM in angular

Question

can you please tell me why my list is not display . I used this https://github.com/angular-widgets/angular-jqm here is the documenetation http://angular-widgets.github.io/angular-jqm/master/docs/#/api/jqm.directive:jqmListview

http://plnkr.co/edit/AfUQ5PGjKi12afqgFRfZ?p=preview

app.controller('loginCtrl', ['$scope', function(scope){
var friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
];
  scope.items=friends;
}])

is there any one idea how to add css ?

any body idea why css is not apply using JQM

Answer 1

Take a look at this

Working Demo

<div data-role="header" data-position="fixed">
    <h1>Fixed Header!</h1>
</div>
<div data-role="content">
 <ul data-role="listview">
    <li><a href="acura.html">Acura</a></li>
    <li><a href="audi.html">Audi</a></li>
    <li><a href="bmw.html">BMW</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>