I am using bootstrap and angular directives. My angular directive template uses bootstraps class 'col-md-3' and initial rendering it works. But on page resize, my directive which renders html content is not responsive (not rearranging contents based on window size).
<div class="col-md-12">
<my-dir data-list="arrayOfObjects">
<my-card item="card"></mycard>
</my-dir>
</div>
my-dir is my first directive, which uses ng-repeat like below
<div class="col-md-3" ng-repeat="card in dataList">
<div inject></div>
</div>
inject is another of my directive which has code like below
link: function($scope, $element, $attrs, controller, $transclude) {
var innerScope = $scope.$new();
$transclude(innerScope, function(clone) {
$element.empty();
$element.append(clone);
$element.on('$destroy', function() {
innerScope.$destroy();
});
});
}
Why is bootstrap failing to work .. if instead of using directives, i directly put my code using "col-md-3" then it works.
