fix(ObservableMedia): provide consistent reporting of active breakpoint

**ObservableMedia** reports of the active breakpoint are not consistent:

*  during page startup - active breakpoint as "gt-sm"  instead of "md", "lg", or "xl".
*  during manual resize - active breakpoint as "xs", "sm", "md", "lg", or "xl".

fixes #185.

src/lib/media-query/observable-media-service.ts

@@ -24,10 +24,12 @@ import {BreakPoint} from './breakpoints/break-point';
  */
 export abstract class ObservableMedia implements Subscribable<MediaChange> {
   abstract isActive(query: string): boolean;
+
   abstract asObservable(): Observable<MediaChange>;
+
   abstract subscribe(next?: (value: MediaChange) => void,
-              error?: (error: any) => void,
-              complete?: () => void): Subscription;
+                     error?: (error: any) => void,
+                     complete?: () => void): Subscription;
 }
 
 /**
@@ -74,12 +76,15 @@ export abstract class ObservableMedia implements Subscribable<MediaChange> {
  */
 @Injectable()
 export class MediaService implements ObservableMedia {
-  private observable$: Observable<MediaChange>;
+  /**
+   * Should we announce gt-<xxx> breakpoint activations ?
+   */
+  public filterOverlaps = true;
 
   constructor(private mediaWatcher: MatchMedia,
               private breakpoints: BreakPointRegistry) {
-    this._registerBreakPoints();
     this.observable$ = this._buildObservable();
+    this._registerBreakPoints();
   }
 
   /**
@@ -137,6 +142,10 @@ export class MediaService implements ObservableMedia {
         .map((change: MediaChange) => {
           // Inject associated (if any) alias information into the MediaChange event
           return mergeAlias(change, this._findByQuery(change.mediaQuery));
+        })
+        .filter((change: MediaChange) => {
+          let bp = this.breakpoints.findByQuery(change.mediaQuery);
+          return !bp ? true : !(this.filterOverlaps && bp.overlapping);
         });
   }
 
@@ -145,7 +154,7 @@ export class MediaService implements ObservableMedia {
    */
   private _findByAlias(alias) {
     return this.breakpoints.findByAlias(alias);
-  };
+  }
 
   /**
    * Breakpoint locator by mediaQuery
@@ -162,6 +171,7 @@ export class MediaService implements ObservableMedia {
     return bp ? bp.mediaQuery : query;
   };
 
+  private observable$: Observable<MediaChange>;
 }
 
 /**