title: AngularJS error - [$compile:multidir] Multiple directives error
body: <p>I use these packages:
  An angularjs modal from angular-ui package: <a href="http://angular-ui.github.io/bootstrap/#/modal">http://angular-ui.github.io/bootstrap/#/modal</a>
  And Angular-flexslider from here: <a href="https://github.com/EnthusiasticCode/angular-flexslider">https://github.com/EnthusiasticCode/angular-flexslider</a></p>
  
  <p>Every plugin works good when they are in separate pages. but when i use them in one page, angular-flexslider causes an error:</p>
  
  <pre><code>Error: [$compile:multidir] Multiple directives [flexSlider, slide] asking for transclusion on: &lt;div class="flexslider-container ng-isolate-scope ng-scope" slide="s in slides" animation="slide"&gt;
  http://errors.angularjs.org/1.2.0-rc.2/$compile/multidir?p0=flexSlider&amp;p1=s…20ng-scope%22%20slide%3D%22s%20in%20slides%22%20animation%3D%22slide%22%3E
      at ...
  </code></pre>
  
  <p>The template file is this:</p>
  
  <pre><code>&lt;flex-slider slide="s in slides" animation="slide"&gt;
      &lt;li&gt;
          &lt;img ng-src="{{s}}"&gt;
      &lt;/li&gt;
  &lt;/flex-slider&gt;
  
  &lt;div ng-controller="ModalDemoCtrl"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;h3&gt;I'm a modal!&lt;/h3&gt;
      &lt;/script&gt;
  
      &lt;button class="btn" ng-click="open()"&gt;Open me!&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And app.js file:</p>
  
  <pre><code>angular.module('theApp', ['theApp.filters', 'theApp.services', 'theApp.directives', 'theApp.controllers', 'ngRoute', 'ngSanitize', 'angular-flexslider', 'ui.bootstrap']).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/home', {templateUrl: (someurl...) , controller: (a name ...) });
    }]);
  </code></pre>
  
  <p>The controller.js file is:</p>
  
  <pre><code>angular.module('theApp.controllers', [])
   .controller('SliderMedium', [ '$scope', function($scope) {
     $scope.slides = [
       'images/slider/01.png',
       'images/slider/02.png',
     ];
   }]);
  
  // ========= THIS IS controllers from angular-ui with no modification =======:
  // ==========================================================================
  var ModalDemoCtrl = function ($scope, $modal) {
  
    $scope.items = ['item1', 'item2', 'item3'];
  
    $scope.open = function () {
  
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
    };
  };
  
  var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
  
    $scope.items = items;
    $scope.selected = {
      item: $scope.items[0]
    };
  
    $scope.ok = function () {
      $modalInstance.close($scope.selected.item);
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  };
  </code></pre>
  
  <p>How can i fix it?  Tell me if further information is needed. Thanks.</p>
  
  <p><strong>UPDATE:</strong> unnecessary html markups removed, controller.js and app.js contents added.</p>