从UI Bootstrap中的动态加载的选项卡激活第一个

Question

I am using UI Boostrap ( http://angular-ui.github.com/bootstrap ) with AngularJS and Jade. I am not able to get that the first tab from a set dynamically generated could be selected when the section is loaded. This is my code:

div#attachments-section
   tabs
      pane(ng-repeat='attach in attachments', heading='{{attach.filename}}', active='attach.active')
         div.content
            object(width='100%', height='100%', data='{{"http://localhost/files/" + attach.content}}')

It means, when the section (#attachments-section) is loaded, none tab is selected. I attempted assigning a true value for the attribute active in the first element of the JSON collection (attachments) but it doesn't work.

Check: I have updated my code (with an object tag) because I need to show every attachment using PDF's browser viewer.

Update I followed @blesh suggestion and I could realize that it works well in Firefox but not in Chrome. I have written a sample in Punkler.

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

Do you have any idea about what could it happen?

Answer 1

I found it! In Chrome you must to specify the type of embedded content in an object tag.

    <div ng-controller="MainCtrl">
    <div><h2>Example</h2></div>
    <div id="attachments-section">
      <tabs>
          <pane ng-repeat="attachment in attachments" heading="{{attachment.title}}" active="attachment.active">
            <div style="height: {{objHeight}}; overflow-y: hidden;">
              <object type='application/pdf' width='100%', height='100%', data='{{attachment.filename}}'></object>
            </div>
          </pane>
      </tabs>
    </div>
</div>

Now this code in punkler works in any browser: http://plnkr.co/edit/ESBWciLAKJosK2u6eZVD

Thanks for your help.