javascript - Lose events with ng-include -

i'm new in html/css/js , have following problem: want create list of component. i've created componenta (works perfecly) , now, in componentb want add ng-include specific number of componentsa seems loose ng-click event.

can me ?

later edit:

this piece of componenta: html:

<div id="container" class="container">      <p   id="details"   class="details"   ng-show="!pressed" ng-click="expand();">details</p> </div> 

js:

'use strict';  angular.module('app', [])   .directive('componenta', [function () {        return {           templateurl: 'componenta.html',           restrict: 'a',           scope: true,           controller: function ($scope) {                $scope.pressed = false;                $scope.expand = function() {                    if ($scope.pressed === true) {                       $scope.pressed = false;                       document.getelementbyid("container").style.width = '550px';                       document.getelementbyid("details").style.webkitanimation = "fadein 3s";                   }                   else{                       $scope.pressed = true;                       document.getelementbyid("container").style.width="780px";                   }               };           }       };   }]); 

in componentb, i'm trying add components this:

<div ng-include="'componenta.html'"></div> <div ng-include="'componenta.html'"></div> <div ng-include="'componenta.html'"></div>  

it shows components a, respect things css file, nothing js file.

you have created attribute directive - there no reason use ng-include (it insert template, not logic).

<div component-a></div> 

secondly, bad practice manipulate dom through controller. seems in case makes more sense use ngclass directive in template instead of changing styles in controller.