Display OpenLayers map using ng-view AngularJS

I am building an AngularJS app which exposes an OpenLayers map. I used this simple example (literally just copy and pasted into an HTML file) ran it in the browser and - no surprise - it worked.

I then added the AngularJS Wrapping to it so that I could include it in a partial declared and routed to via app.js (below) and the OpenLayers library doesn't seem to be working any more. I am not getting errors in the console (running it on IE11) but I am not getting a visible map either. I have tried substituting the map for some simple data binding in the controller and it's working, and I am getting the sub-heading displayed just above the map too.

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.11.2/build/ol.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
</head>

<body ng-app="app" ng-controller="MainController">
    <h1>Map Viewer</h1>
    <div ng-view></div>
</body>

</html>

app.js

angular.module("app", ["ngRoute"])
    .config(function($routeProvider){
        $routeProvider
            .when("/main", {
                templateUrl: "main.html",
                controller: "MainController"
            })
            .otherwise({redirectTo: "/main"});
    });

main.html

<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'sat'})
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: 4
    })
  });
</script>

main.ctrl.js

angular.module("app")
    .controller("MainController", function($scope){
        //Do something
    });

Solution

If you consider in using directives check this

Plunker

EDIT I modified it for a more simple use

angular.module("app")
.controller("MainController", function($scope){
    //Do something
})
.directive('mapDir', function () {
return {
    restrict: 'A',
    link: function ($scope) {
       var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.MapQuest({layer: 'sat'})
            })
          ],
          view: new ol.View({
            center: ol.proj.fromLonLat([37.41, 8.82]),
            zoom: 4
          })
        });
    }
};
});

and view

<h2>My Map</h2>
<div map-dir id="map" class="map"></div>

Tell me if it was this what you are looking for