AngularJS, ThreeJS and WebGL - using JSONloader

http://angularjs.org/ http://threejs.org/ http://cdnjs.com/libraries/three.js/

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl as mainCtrl" class="container">
        <div class="row">
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <h3>Angular, ThreeJS and WebGL - using JSONloader</h3>
            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <!-- Single button -->
                <div class="btn-group" dropdown is-open="status.isopen">
                    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                        Load 3D-model <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="model in mainCtrl.listModels()">
                            <a href="#" ng-click="mainCtrl.setActiveModel(model.name)" ng-bind="model.name"></a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#" ng-click="mainCtrl.addModel('NewName', '{model:\'model3\'}')">Save a new JSON model</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <div>
                    <ul>
                        <li ng-repeat="model in mainCtrl.listModels()" ng-bind="model.name"></li>
                    </ul>
                </div>
                    
                <div>
                    <b>Active Model:</b> <br/>
                    <span ng-bind="mainCtrl.getActiveModelName()"></span>
                </div>
                
                
  ...

JavaScript

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

app.controller('MainCtrl', ['ThreeModelService', '$scope', function(ThreeModelService, $scope) {
    var self = this;
    
    self.listModels = function() {
        return ThreeModelService.listModels();
    };
    
    self.setActiveModel = function(modelName) {
        ThreeModelService.setActiveModel(modelName);
    };
    
    self.getActiveModelName = function() {
        return ThreeModelService.getActiveModelName();
    };
    
    self.addModel = function(modelName, modelJSON) {
        var modelJSONstringCleaned = modelJSON.replace('\\','');
        ThreeModelService.addModel(modelName, modelJSONstringCleaned);
    };
    
    self.getJsonFromModelName = function(modelName) {
        return ThreeModelService.getJsonFromModelName(modelName);
    };
    
    $scope.canvasWidth = 400;
    $scope.canvasHeight = 400;
    $scope.dofillcontainer = true;
    $scope.scale = 1;
    $scope.materialType = 'lambert';
}]);

app.factory('ThreeModelService', [ function() {
    var threeModels = [
        {
            id: 1,
            name:'Model 1',
            json: {model:'model1'},
            active: true
        },
        {
            id: 2,
            name:'Model 2',
            json: {model:'model2'},
            active: false
        }
    ];
    
    return {
        listModels: function() {
            return threeModels;
        },
        setActiveModel: function(modelName) {
            for( var i=0; i < threeModels.length ; i++){
                var obj = threeModels[i];
                if( obj.name === modelName){
                    obj.active = !obj.active;
                }
                else{
                    obj.active = false;
                }
            }
        },
        getActiveModelName: function() {
            for( var i=0; i < threeModels.length ; i++){
                var obj = threeModels[i];
                if( obj.active === true ){
                    return...