Angular Carousels: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined while using carousels with Angular JS
<p>Before I ask I have gone through <a href="https://stackoverflow.com/questions/29027830/getting-cannot-read-property-offsetwidth-of-undefined-with-bootstrap-carousel">this</a>, but this doesnt seem to be issue in my case.
I am using plain text carousels in angularJS , with <a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&amp;stacked=h" rel="nofollow noreferrer">this</a> example as reference.</p>
<p>I am trying to set active class for carousel with 1st index element of the angular array and then the other items will be from the 2nd index. It is showing up the active element,but When I am trying to click for the second element it is giving the above error.</p>
<p>Following is what I have done so far.</p>
<p>HTML file :</p>
<pre><code>&lt;head&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;style&gt;
  .carousel-inner &gt; .item &gt; img,
  .carousel-inner &gt; .item &gt; a &gt; img {
      width: 70%;
      margin: auto;
  }
  &lt;/style&gt;

&lt;/head&gt;

&lt;div id=&quot;myCarousel&quot; style=&quot;height:100px&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
    &lt;!-- Indicators --&gt;
    
    &lt;ol layout=&quot;row&quot; class=&quot;carousel-indicators&quot; &gt;
    &lt;div  ng-repeat=&quot;message in messages&quot;&gt;
      &lt;li  data-target=&quot;#myCarousel&quot; data-slide-to=&quot;$index&quot; class=&quot;active&quot; ng-if=&quot;$index === 0&quot; &gt;&lt;/li&gt;
      &lt;li  data-target=&quot;#myCarousel&quot; data-slide-to=&quot;$index&quot;  ng-if=&quot;$index !== 0&quot; &gt;&lt;/li&gt;
   &lt;/div&gt;
   
   
    &lt;/ol&gt;
    
    &lt;!-- Wrapper for slides --&gt;
    &lt;div layout=&quot;row&quot;  class=&quot;carousel-inner&quot; ng-repeat=&quot;message in messages&quot;  role=&quot;listbox&quot;&gt;
      &lt;div class=&quot;item active&quot; ng-if=&quot;$index === 0&quot;&gt;
        {{message.text}}
      &lt;/div&gt;
     &lt;div  class=&quot;item&quot; ng-if=&quot;$index !== 0&quot;&gt;
        {{message.text}}
      &lt;/div&gt;
  
    &lt;/div&gt;


  &lt;/div&gt;
</code></pre>
<p>Can someone help me in understnading the carousel display here and why the error has given, I have set active element as mentioned in the other post but it still doesnt solve the issue.</p>
<p>Thanks in advance</p>