EDIT:
I made a full example of a WebGL directive using three.js with bindings to resize the object or change it's material type. Also, events such as window resizing and mouse moved:

• source: https://github.com/winkerVSbecks/angularWebglDirective


• demo: http://winkervsbecks.github.io/angularWebglDirective/

Yes this is very much possible. Beyond the menus, leaderboards, etc. you can wrap your canvas into a directive too.

1. The controller will setup the game state


2. Pass this state, loaded data from server and any other data you might have to the directive


3. Finally you init the canvas in the directives link function

I made this little app to help me with a school project: http://callmethey.herokuapp.com/polygons. This is the directive I use (with three.js for the canvas part):

app.directive('polygon', function() {

  return {

    restrict: 'A',

    scope: { 

      vertices: '=polygon',  

      color: '=color'

    },

    link: function(scope, element, attrs)

    {

      var camera, scene, renderer;

      var polygon;

      var targetRotation = 0;

      var targetYRotation = 0, targetXRotation = 0;

      var targetYRotationOnMouseDown = 0, targetXRotationOnMouseDown = 0;

      var mouseX = 0, mouseY = 0;

      var mouseXOnMouseDown = 0, mouseYOnMouseDown = 0;

      var width = $(element).width();

      var height = 200;

      var widthHalfX = width/2;

      var widthHalfY = height/2;



      init();



      function init() {

        // Setup scene

        camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );

        camera.position.x = 0;

        camera.position.y = 0;

        camera.position.z = 300;

        scene = new THREE.Scene();

        // Build Polygon

        var geometry =  new THREE.Geometry();

        angular.forEach(scope.vertices, function (v) {

          geometry.vertices.push( new THREE.Vector3( v.x, v.y, v.z ) );

        });

        geometry.faces.push( new THREE.Face3(0, 1, 2 ));

        THREE.GeometryUtils.center( geometry );

        // Push polygon to scene

        var material = new THREE.MeshBasicMaterial( { color: cols[scope.color], side: THREE.DoubleSide } );

        polygon = new THREE.Mesh( geometry, material );

        scene.add(polygon);

        renderer = new THREE.WebGLRenderer();

        renderer.setSize( width, height );

      }



     // ..... rest of the code truncated for readability

  };

});