render widgets

HTML

<div class="page-wrapper" ng-controller="mainCtrl">
    <div class="widget">
        <h3>widgets</h3>
    </div>
    <div class="page">
        <h3>Page</h3>
        <ul>
            <li ng-repeat="widget in widgets">
    <span directive="{{widget.component}}"></span>
</li>
        </ul>
    </div>
</div>

CSS

.page-wrapper {
    border: 1px solid red;
    overflow: hidden;
}
.widget {
    float: left;
    width: 20%;
    background: #c1c1c1;
}
.page {
    float: left;
    width:80%;
}

JavaScript

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

app.controller('mainCtrl', ['$scope', '$q', 'widgetAPI', function($scope, $q, widgetAPI) {
    $scope.widgets = [];
    widgetAPI.get().then(
        function(data) {
            $scope.widgets = data;
        },
        function(err) {
            console.log("error", err);
        }
    );
}])

//Our service
.service('widgetAPI', ['$q', function($q) {
    var api = {};
    api.get = function() {
        //here will be $http in real app
        return $q.when(
            [
                {
                    component: 'wgtitle',
                    title: "Hello world",
                    color: '#DB1F1F',
                    backgroundColor: '#c1c1c1',
                    fontSize: '32px'
                },
                {
                    component: 'wgimage',
                    src: "http://cs425622.vk.me/v425622209/79c5/JgEUtAic8QA.jpg",
                    width: '100px'
                },
                 {
                    component: 'wgimage',
                    src: "http://cs425622.vk.me/v425622209/79cf/S5F71ZMh8d0.jpg",
                    width: '400px'
                }
                
            ]
        );
    };
    return api;
}])

//stole from internet and a bit changed for our needs
.directive('proxy', ['$parse', '$injector', '$compile', function ($parse, $injector, $compile) {
    return {
        replace: true,
        link: function (scope, element, attrs) {
            var nameGetter = $parse(attrs.proxy);
            var name = nameGetter(scope);
            var value = undefined;
            if (attrs.proxyValue) {
              var valueGetter = $parse(attrs.proxyValue);
              value = valueGetter(scope);
            }
    
            var directive = $injector.get(name.component + 'Directive')[0];
            if (value !== undefined) {
                attrs[name.component] = value;
            }
            var a = $compile(directive.template)(scope);
           ...