Angular 1.1.5: Big Directive

http://angularjs.org/

by skeemer

HTML

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-controller="MyCtrl">
    <alphalist ng-repeat="list as item" list="list" />
</div>

CSS

h1 {
    color: red;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.list = [
        'alpha',
        'apple',
        'charlie',
        'clouset',
        'don',
        'fred',
        'pan',
        'pat'];
}

myApp.directive('alphalist', function factory($compile) {
    var directiveDefinitionObject = {
        priority: 0,
        template: '<div>{{item}}</div>',
        replace: true,
        transclude: false,
        restrict: 'E',
        scope: {
            list: '=list'
        },
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    list = scope.list;
                    scope.newList = [];
                    var last = {};
                    for (var i = 0; i < list.length; i++) {
                        if (i == 0 || list[i][0] != list[i - 1][0]) {
                            scope.newList.push(scope.list[i][0]);
                        }
                        scope.newList.push(scope.list[i]);
                    }
                },
                post: function postLink(scope, element, iAttrs, controller) {
                    contents = element[0].textContent;
                    element[0].outerHTML = '<h1>' + contents + '</h1>';
                    e = $compile(element.contents())(scope);
                    element.replaceWith(e);
                    console.log(element);
                }
            }
        },
        link: function postLink(scope, iElement, iAttrs) {}
    };
    return directiveDefinitionObject;
});

myApp.directive('changeitem', function ($compile) {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            console.log(scope);
            contents = element[0].textContent;
            element[0].outerHTML =...