good widget template to exapnded

by merganser

HTML

<div ng-controller="MyCtrl">
    <div rangepicker="{{pickers}}" ng-model="text"></div>
    <button ng-click="add('<picker/>')">Add One</button>
    <button ng-click="modifyText()">change</button>
</div>

JavaScript

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

myApp.directive('picker', function () {
    return {
        scope: {
        },
        restrict: 'AE',
        replace: true,
        template: '<div><p>{{text}}</p><button ng-click="changeText()">test</button></div>',
        link: function (scope, elem, attrs) {
            scope.changeText = function (txt) {
                scope.index += 1;
                scope.text = scope.index;
            };
            scope.restore = function () {
                scope.text = "test",
                scope.id = 1,
                scope.index = 1
            };
            scope.restore();
        }
    }
});

myApp.directive('rangepicker', function ($compile, $parse) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attr) {
            attr.$observe('rangepicker', function (val) {
                element.html('');
                var pickers = $parse(val)(scope);
                angular.forEach(pickers, function (picker) {
                    element.append($compile(picker)(scope));
                });
            });
        }
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.pickers = ['<picker/>', '<picker/>'];
    $scope.add = function (picker) {
        $scope.pickers.push(picker);
    }
    $scope.modifyText = function () {
				//would need to grab element and not just array value
        var last = $scope.pickers[$scope.pickers.length - 1];
        console.log(last);
        last.changeText("tt");
    }
});