One directive for several elements

For example i have such HTML page:

<body  ng-app="MyApp">
<standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}">
        <div class="control" id="previous">Prev</div>
        <div class="slide-add">Add</div>
        <div class="control" id="next">Next</div>
        <div class="wrapper">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
 </standart-slider>
 <standart-slider class="slider-app" controls-value="{previous: '#previous', next: '#next', sliderWrap: '.wrapper', slidesName: '.slide', minSlides: '4', controls: '.control'}">
        <div class="control" id="previous">Prev</div>
        <div class="slide-add">Add</div>
        <div class="control" id="next">Next</div>
        <div class="wrapper" data-my-attr="">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
 </standart-slider>
</body>

And such directive:

var MyApp = angular.module('MyApp', []);

MyApp.directive('standartSlider', function () {
var linkFn = function (scope, element, attrs) {
    console.log('Hello!');
    var controls = scope.contorls();
    console.log(controls.previous);
    var currentPosition = 0;
    var slideWidth = 70;
    var slides = angular.element(controls.slidesName);
    var wrapper = angular.element(controls.sliderWrap);
    var previous = angular.element(controls.previous);
    var next = angular.element(controls.next);
    var numberOfSlides = slides.length;
    console.log(numberOfSlides, slides, wrapper, previous, next);

    wrapper.css('overflow', 'hidden');
    slides.wrapAll('<div id="slideInner"></div>')
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    angular.element(controls.controls).click(function () {
        currentPosition = ($(this).attr('id') == 'next') ? currentPosition + 1 : currentPosition - 1;
        console.log(currentPosition);
        attrs.myAttr = "100";

        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        console.log($('#slideInner').css("marginLeft"))
    });


    }

    return {
        restrict: 'E',
        scope: {
            contorls: '&controlsValue'
        },
        link: linkFn
    }
});

The problem is that then i click on 'next' button, slides first slider not the second. How i see it, scope not isolating DOM elements. How can you isolate a copy of Directive with DOM elements? Example of a fiddle: jsFiddle

As I see, your directive use Ids instead of classes. Don't forget, that in DOM document there couldn't be two elements with same id even with different parents.

So you need to rewrite your directive to use classes and search only at children elements of linked element.