title: Tried to integrate AngularJS and three.js but the geometry is not getting rendered
body: <p>(this is an example which i found on the net but still it does not work fine).
  I am trying to integrate AngularJS in order to get an MVC architecture for three.js files. Though I do not find any errors while debugging, I am not able to see any geometry(cube) getting rendered. 
  My JS file.....</p>
  
  <pre><code>var newApp = angular.module('new', ['ngRoute','newServices']);
  
  newApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) {
  $routeProvider.
      when('/', {templateUrl:"views/main.html", controller:'mainCtrl'});
  $locationProvider.html5Mode(false);
  }]);
  
  
  newApp.controller('mainCtrl', ['$scope', 'renderFactory', function ($scope, renderFactory) {
  $scope.text = 'Hello';
  
  init();
  function init() {
      renderFactory.createCamera();
      renderFactory.createCube();
      renderFactory.setup();
      renderFactory.paint();
  
  }
  
  } ]);
  </code></pre>
  
  <p><strong>My factory file...</strong></p>
  
  <pre><code>var xrotation;
  var yrotation;
  var zrotation;
  var WIDTH = 800;
  var HEIGHT = 600;
  var ASPECT = WIDTH / HEIGHT;
  var renderer = new THREE.WebGLRenderer();
  var scene = new THREE.Scene();
  var camera;
  var cube;
  
  var newServices = angular.module('newServices', []);
  newServices.factory('renderFactory', function () {
  return {
  
  
      createCube: function () {
          // set up the cube vars
          var length = 50;
          var segments = 16;
  
          // create the cube's material
          var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
  
          // create a new mesh with cube geometry -
          cube = new THREE.Mesh(new THREE.CubeGeometry(15, 15, 15), sphereMaterial);
  
          //Set Cube Rotation
          //cube.rotation.x += 0.2;
          //cube.rotation.y += 0.3;
          //cube.rotation.z += 0.1;
  
          scene.add(cube);
  
      },
  
      createCamera: function () {
          // set some camera attributes
          var VIEW_ANGLE = 40;
          var NEAR = 0.1;
          var FAR = 10000;
  
          // create a WebGL camera
          camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
                   ASPECT,
                   NEAR,
                   FAR);
  
          // the camera starts at 0,0,0 so pull it back
          //camera.position.z = 250;
  
          // and the camera
          scene.add(camera);
  
      },
  
      paint: function () {
          // draw!
          renderer.render(scene, camera);
      },
  
  
  
      setup: function () {
          // start the renderer
          renderer.setSize(WIDTH, HEIGHT);
          document.getElementById('container1').appendChild(renderer.domElement);
  
      }
  
  };
  });
  </code></pre>
  
  <p>Where did i go wrong??? or did i miss something??</p>