title: Angular inheritance in factories
body: <p>In my current project i working with angular in the front for the first time and i having a little problem with extending "classes" true factories.</p>
  
  <p>case: i have 3 types of markers that can be placed on the map.
  1. assigned markers.
  2. unassigned markers.
  3. panned markers.</p>
  
  <p>i have a base marker object</p>
  
  <pre><code>engine.factory('marker', ['map','icons', function (map, icons) {
  
   var Marker = function Marker() {};
  
   Marker.prototype.mouseover = function mouseover (e) {
    e.target.setIcon(this.icons[this.iconOnHover]);
   };
  
   Marker.prototype.mouseout = function mouseout (e) {
     e.target.setIcon(icons[this.icon]);
   };
  
  return Marker;
  
  }]);
  </code></pre>
  
  <p>and now i am trying to make the panned marker</p>
  
  <pre><code>engine.factory('pannedMarker', ['map', 'marker', 'icons', function (map, marker, icons) {
  
   var PannedMarker = {};
   PannedMarker.prototype = new marker();
  
   return function PannedMarker(location, id) {
     this.id = id;
     this.location = location;
     this.icon = 'purple';
     this.iconOnHover = 'purpleHover';
  
     L.marker(this.location, {icon: icons.purple}).addTo(map.map)
     .on('mouseover', this.mouseover)
     .on('mouseout', this.mouseout);
    };
  }]);
  </code></pre>
  
  <p>when i mouse over on my marker i get this error: 
   Uncaught TypeError: Cannot call method 'call' of undefined</p>
  
  <p>i not so good at js prototyping and i hope to get some constructed information how to implement this as a best practice. Cause i know this is not the proper way.</p>