angularjs directive to fit text in an overflow hidden element

replace text that would be too long to fit an overflow:hidden block with an abbr and an elipse.

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div ng-app="test">
    <div ng-controller="containerCtrl">
        <component ng-repeat='c in components' id="c.id" my-width="{{c.width}}" my-height="{{c.height}}">
    </div>
</div>

JavaScript

angular.module('test', []).

controller('containerCtrl', function ($scope) {
    $scope.components = [{ id: "c1", width: 100, height: 100 },
                        { id: "c2", width: 200, height: 100 },
                        { id: "c3", width: 300, height: 100 }];
    
    //in the actual controller I am using a socket provider and doing
    //socket.forward([
    //        'initPage',
    //        'refreshPage'
    //    ], $scope);
    //simulating it with a simple broadcast here..
    $scope.$broadcast("onSomething", "");
    
    $scope.doSomething = function (data) {
        alert("doing something");
    };
}).

directive('component', function () {
        var linkFn = function(scope, element, attrs) {
            $(element).
                resizable({
                    stop: function( event, ui ) {
                        scope.emitSomething(attrs.id, ui.position);
                    }
                });

            scope.$on('onSomething', function(res) {
                alert("onSomething!");
            });
        };

        return {
            restrict: 'E',
            template: '<div class="ui-widget-content" style="width: {{width}}px; height: {{height}}px;"></div>',
            replace: true,
            scope: {
                width:'@myWidth',
                height:'@myHeight'
            },
            link : linkFn
        };
    });