Display Mouse Position OpenLayers in Custom Projection

Question

Being extremely new to this I am trying to build a fully functioning map from scratch using OL3 have tried to work this out myself but I just can't get it to work I always seem to get the ESPG 3857 coordinates.

I have imported the proj4:

proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 ' +
    '+x_0=400000 +y_0=-100000 +ellps=airy ' +
    '+towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 ' +
    '+units=m +no_defs');

And below is the following code for the map and control

var scaleLineControl = new ol.control.ScaleLine(); //Invokes ScaleLine API
var coordinatesDisplay = new ol.control.MousePosition({projection: ol.proj.get('EPSG:27700')})

//Renders the Map at Herefordshire and restricts viewable area to hereford.
var map = new ol.Map({
      controls: ol.control.defaults({}).extend([
            scaleLineControl,           // Scale Line Added here.
            coordinatesDisplay]),   // Coordinates Added here.
      target: 'map',
      renderer: 'canvas',
      layers: layersList,

      view: new ol.View({
      extent:[-349756.37790501, 6768714.96232547, -260261.2794960649, 6871952.667286136], 
      maxZoom: 20, 
      minZoom: 10
      })
    });

map.getView().fit([-349756.37790501, 6768714.96232547, -260261.2794960649, 6871952.667286136], map.getSize()); // End of Map Render