angularjs - populating angular directive based on data and tag attribute -

i'm building angular directive in multiple places on same page. i've got few different video tags, , want build flexible enough can place right video in right location.

so, in videocontroller, i've got object holds video details

$scope.videos = {      "main":{ webrtcstream: streamdetails},      "guest":{ webrtcstream: streamdetails},      "other": { webrtcstream: streamdetails} } 

then have stream directive

.directive('stream', function(){        return {              restrict: 'e',              controller: 'videocontroller',              template: '<video></video>',              link: function(){                 elm[0].firstchild.src=url.createobjecturl(stream);                 elm[0].firstchild.play();              }        } }); 

i'd html be

<stream data-name="main"></stream> <stream data-name="guest"></stream> <stream data-name="other"></stream> 

what best way select correct stream put correct directive?

you can bind video information 2 way databinding in directive:

app.directive('stream', function(){        return {              restrict: 'e',              template: '<video></video>',              scope:{                name: '='              },              link: function(scope, element, attr){                var video = element.find('video');                video.attr('src', scope.name);                video[0].play();              }        } }); 

and bind video information this:

<stream data-name="videos.main"></stream> <stream data-name="videos.guest"></stream> <stream data-name="videos.other"></stream> 

see this plunker simplified solution.