multiple bootstrap 4 carousel changes only the first slide

I have got 3 carousel using this, when i click next only the first carousel works even if i click next or previous on 2nd carousel it slides only the first slide. Please help

<div class="img-container" >
                  <div class="mem-carousel carousel slide" data-ride="carousel" >
                        <div class="carousel-inner" >
                            <div class="carousel-item" ng-class="{active:!$index}" ng-repeat="img in space.images">
                              <img ng-src="" style="width:400px; height: 200px;">
                              </div> 
                              <div class="favorite-block price">
                                  <span class="price-text-left"><font><font>Rs </font></font></span>
                                  <span class="price-text-right">
                                    <div><font><font>per</font></font></div>
                                    <div><font><font>hour</font></font></div>
                                  </span>
                              </div> 
                              <a class="carousel-control-prev" href=".mem-carousel"  role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                              </a>
                              <a class="carousel-control-next" href=".mem-carousel" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                              </a>      
                            </div>          

                        </div>
                      </div>

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/25/multiple-bootstrap-4-carousel-changes-only-the-first-slide/
via @lzomedia #developer #freelance #web