having problem with geoserver wms and angularJS

[drissrais]

Hi there! i'm facing a problem working with geoserver and angular-openlayers-directive. I need to show a layer i've published in geoserver using this direrctive, but i don't see it. before that, i've added 4 base layers (esri maps, openstreetmap, bing maps, stamen), as shown on the code below, and a nav menu to allow user choose the basemap he wants, and it's working well.

(function() {
'use strict';

angular.module('gdrtApp').controller('MapController', MapController);

MapController.$inject = [ '$scope', '$http', 'olData' ];

function MapController($scope, $http, olData) {
	var vm = this;
	vm.center = {
		lat : 47.383474,
		lon : 1.329346,
		zoom : 5,
		autodiscover : true
	};
	vm.layers = [
			{
				name : 'OpenStreetMap',
				active : true,
				source : {
					type : 'OSM',
					url : "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
					attribution : '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				}
			},
			{
				name : 'Stamen',
				active : false,
				source : {
					type : 'Stamen',
					layer : 'terrain'
				}
			},
			{
				name : 'Bing Maps Road',
				active : false,
				source : {
					name : 'Bing Maps',
					type : 'BingMaps',
					key : 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
					imagerySet : 'Road'
				}
			},
			{
				name : 'Esri Maps',
				active : false,
				source : {
					layer : 'World_Street_Map',// ['World_Imagery',
					// 'World_Street_Map',
					// 'World_Topo_Map',
					// 'World_Physical_Map',
					// 'World_Terrain_Base',
					// 'Ocean_Basemap',
					// 'World_Light_Gray_Base',
					// 'NatGeo_World_Map']
					type : 'EsriBaseMaps'
				}
			}
	];
	vm.changeLayer = function(layer) {
		vm.layers.map(function(l) {
			l.active = (l === layer);
		});
		vm.selectedLayer = layer.name;
	};
	
	vm.controls = [ {
		name : 'zoom',
		active : true
	}, {
		name : 'fullscreen',
		active : true
	} ];
	
	vm.selectedLayer = vm.layers[0].name;
	}
})();

my html code:

<openlayers custom-layers="true" ol-view="vm.view" ol-center="vm.center" ol-controls="vm.controls" width="100%" height="480px">
	<ol-layer name="{{ layer.name }}" ol-layer-properties="layer" ng-repeat="layer in vm.layers|filter: { active: true}"></ol-layer>
	<ol-control name="{{ control.name }}" ng-repeat="control in vm.controls|filter: {active: true}"></ol-control>
</openlayers>
<nav id="couches">
	<ul data-ng-repeat="layer in vm.layers">
    		<label>
    		    <input name="name" type="radio" ng-value="layer.name" ng-model="vm.selectedLayer" ng-click="vm.changeLayer(layer)" />
    			{{layer.name}}
    		</label>
</ul>
</nav>

after that, i've added like in the given example with WMS from geoserver:

vm.geoserver = {
	    source: {
	        type: 'ImageWMS',
	        url: 'http://10.0.0.20:8090/geoserver/GDRT/wms',
	        params: {
	        	LAYERS: 'GDRT:gvifr_arc'
	        },
		crossOrigin: null,
		serverType: 'geoserver'
	    }
};

and:

<ol-layer ol-layer-properties="vm.geoserver"></ol-layer>

What am i missing to see the geoserver wms layer? Thanks.