jquery - Unable to access elements from ng-included files -

i'm trying simple of things, json i'm repeating menu scroll destination defined. on same repeated element set directive , pass destination parameter directive function. inside function i'm trying access element can't access element reason.

all this:

[context: document, selector: "#skills"] [context: document, selector: "#projects"] [context: document, selector: "#about"] [context: document, selector: "#form"] 

when should getting similar test did:

[header#site-header.container-fluid.ng-scope, context: document, selector: "#site-header"] 

all of these selectors i'm trying access comes ng-included files this:

<div ng-include="'views/templates/skillset.html'"></div> <div ng-include="'views/templates/projects.html'"></div> <div ng-include="'views/templates/about.html'"></div> <div ng-include="'views/templates/form.html'"></div> 

could problem? if so, how gain access selectors? tried accessing them directly $('#skillset') yields same result.

could scope problem? since included files have own scope, seem odd since directive bound core module parent scope of them all.

example of included file:

<div id="skillset" class="container padding narrow" ng-controller="skillsctrl">   <div class="row">     <div class="col-sm-3 fav-box" ng-repeat="skill in skillset.favorites">       <img ng-src="{{skill.imageurl}}" alt="{{skill.alt}}" class="fav-box__logo">     </div>   </div> </div> 

here's json:

{   "menu": {     "skillset": {       "scrollto": "#skills"     },     "projects": {       "scrollto": "#projects"     },     "about": {       "scrollto": "#about"     },     "contact": {       "scrollto": "#form"     }   } } 

the markup:

<ul class="nav navbar-nav" id="site-nav">   <li ng-repeat="item in menu" class="menu-item text-center"        data-smooth-scroll="{{item.scrollto}}">   </li> </ul> 

my directive:

core.directive('smoothscroll', [function() {    return {     restrict: 'a',     link: function(scope, element, attrs) {        var dest = $(attrs['smoothscroll']);       console.log(dest);      }   } }]); 

the attribute of angular directive not evaluated terms of angular expressions unless define reference via isolated scope. directive should like

core.directive('smoothscroll', [function() {   return {     restrict: 'a',     scope: {         smoothscroll: '='     }     link: function(scope, element, attrs) {       var dest = scope.smoothscroll;       //do smooth scroll       console.log(dest);     }   } }]); 

usage should data-smooth-scroll="item.scrollto" without curly braces