bootstrap carousel on two div's
<p>As you can see below I have two div's one is by the id By Senate and the other is 2nd div. I have a button on first div called view details. My requirement is when i click the view details button I want it to do a carousel and go to the 2nd div. I want to use bootstrap carousel.</p>

<p>I have tried some ways but it did not work out. Can somebody please help me.</p>

<pre><code>&lt;div id="BySenate" style="display: none"&gt;
    &lt;table class="table table-hover table-responsive"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Party&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Chamber&lt;/th&gt;&lt;th&gt;District&lt;/th&gt;&lt;th&gt;State&lt;/th&gt;&lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr dir-paginate="senate in senate|orderBy:['fullname']|filter:search|itemsPerPage:10" pagination-id="bySenate"&gt;
            &lt;td&gt; &lt;img src="{{senate.party_name}}" style="max-height: 10%;max-width: 10%;"/&gt; &lt;/td&gt;
            &lt;td&gt;{{senate.fullname}}&lt;/td&gt;
            &lt;td &gt; &lt;img src="{{senate.chamber_type}}" style="max-height: 8%;max-width: 7%;"/&gt;{{senate.chamber_name}} &lt;/td&gt;
            &lt;td&gt;{{senate.district_name}}&lt;/td&gt;
            &lt;td&gt;{{senate.state_name}}&lt;/td&gt;
            &lt;td&gt;  &lt;button type="button" class="btn btn-primary" id="{{senate.bioguide}}" value="{{senate.bioguide}}" ng-click="getLegislatorDetails($event);"&gt;View Details&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;div id="2nd div"&gt;
&lt;/div&gt;
</code></pre>