Правильность написания.

[dramoturg]

Всем привет. Начал изучать AngularJs и ради первого опыта хотел попробовать совместить его с fabric.js.
Только начал вот что у меня получилось.

<div ng-app>    
        <div ng-controller="FabricJsCtrl">
            <table>
                <tr>
                    <td><div id='canvas_container'><canvas style='height:400px;width:400px;border:1px solid #ddd' id="canvas">You have a very old browser... (It does not support HTML5 canvas)</canvas></div></td>
                    <td>
                        <div id='layers_menu'>
                            <button ng-click='addRect()'>Add rect</button>
                            <div id='shapes_list_conatiner'>
                                <div>{{canvasShapes().length}} total</div>
                                <div id="shapes_list" ng-repeat="shape in canvasShapes()">
                                    <div ng-class="{active: shape.get('active')}" class="shape " ng-click='selectShape()'>{{shape.get('fill')}}</div>
                                </div>
                            </div> 
                        </div>
                    </td>
                    <td>
                        <div id='timeline'>X: {{currentShape().get('left')}}, Y: {{currentShape().get('top')}}</div>
                        <div>Test{{activeObject.get('left')}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

function FabricJsCtrl( $scope ) {
            var canvas = new fabric.Canvas('canvas');

            canvas.setHeight(400);
            canvas.setWidth(400);
            
            $scope.canvas = canvas;
            $scope.activeObject = null;
            $scope.canvasShapes = function() {
                if(typeof canvas !== 'undefined') {
                    return canvas.getObjects();
                }
                return [];
            };
            
            $scope.addRect = function() {
                var rect = new fabric.Rect({
                    left: 20 * $scope.canvasShapes().length,
                    top:  20  * $scope.canvasShapes().length,
                    fill: '#000',
                    width: 30,
                    height: 30
                });
                canvas.add(rect);
            };
            $scope.selectShape = function() {
                var shape = this.shape;
                canvas.setActiveObject(shape);
                $scope.activeObject = shape
            };
            $scope.currentShape = function() {
                if(typeof canvas !== 'undefined') return canvas.getActiveObject();
            };
            canvas.on("object:selected", function (options, event) {
               var object = options.target; //This is the object selected
               $scope.$apply(function () {
                   $scope.activeObject = object;
               });
            });
            canvas.on("object:moving", function (options, event) {
               var object = options.target; //This is the object selected
               $scope.$apply(function () {
                   $scope.activeObject = object;
               });
            });
        }

Меня интересует правильное ли начало моих мыслей. Или для работы с канвасом лучше добавить фабрику или сервис.
Спасибо всем откликнувшимся