javascript - can't get fonts using this function -

@return void      getall: function(filters) {         var self   = this,             cached = localstorage.get('googlefonts'),             key    = $rootscope.keys['google_fonts'];          if (cached) {             self.paginator.sourceitems = cached;             return filters ? self.paginator.filter(filters) : self.paginator.start(cached);         }          $http.get('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key='+key)             .success(function(data) {                 localstorage.set('googlefonts', data.items);                 self.paginator.sourceitems = data.items;                 filters ? self.paginator.filter(filters) : self.paginator.start(data.items);             });     },      /**      * load given google fonts dom.      *      * @param  {mixed} names      * @return void      */     load: function(names) {         var head = $('head');         $rootscope.loading = true;          //make array of font names current fonts         //in paginator if none passed         if ( ! names) {             names = $.map(fonts.paginator.currentitems, function(font) {                 return font.family;             });              //normalize names array if string passed         } else if ( ! angular.isarray(names)) {             names = [names];         }         //remove previous page fonts          $(head).find('#dynamic-fonts').remove();          //load given fonts         head.append(             '<link rel="stylesheet" id="dynamic-fonts" href="http://fonts.googleapis.com/css?family='+             names.join('|').replace(/ /g, '+')+'">'         );          $rootscope.loading = false;     } };  return fonts; }]); 

this fontjs , want fetch fonts family, it's not working .

this main index page function.

<section id="text" data-index="2" class="tab" ng-controller="textcontroller">    <h2 class="tab-title">pick font</h2>    <div class="filter-inputs">       <div class="filter-input">          <md-select ng-model="filters.category" ng-change="fonts.paginator.filter(filters)" placeholder="select type">             <md-option value="tangerine">tangerine</md-option>             <md-option value="sans-serif">sans serif</md-option>             <md-option value="display">display</md-option>             <md-option value="handwriting">handwriting</md-option>             <md-option value="monospace">monospace</md-option>          </md-select>       </div>       <md-input-container class="filter-input">          <label>search</label>          <input type="text" ng-model="filters.family" ng-change="fonts.paginator.filter(filters)">       </md-input-container>    </div>    <div ng-hide="activetab !== 'text'" class="pagination md-whiteframe-z1" ed-fonts-pagination></div>    <section class="fonts-preview" ed-pretty-scrollbar ed-scroll-axis="y" ed-scroll-theme="light">       <div class="font" ng-style="{ 'font-family':  font.family }" ng-repeat="font in fonts.paginator.currentitems" ng-click="changefont(font.family, $event)">{{ font.family }}</div>    </section>    <div data-name="text" class="actions-menu wider md-whiteframe-z1" ng-class="ispanelenabled() ? 'open' : 'closed'">       <div class="menu-header">          <h3>text</h3>       </div>       <section class="actions-menu-inner" ng-style="{ 'max-height': maxpanelheight }" ed-pretty-scrollbar ed-scroll-axis="y" ed-scroll-theme="light">          <div class="md-slider">             <div class="slider-label">opacity</div>             <md-slider aria-label="text opacity" step="0.1" ng-model="opacity" ng-change="text.setproperty('opacity', opacity)" min="0" max="1"></md-slider>          </div>          <div class="slider-input">             <input min="0.1" max="1" step="0.1" type="number" ng-change="text.setproperty('opacity', opacity)" ng-model="opacity"/>          </div>          <div class="md-slider">             <div class="slider-label">font size</div>             <md-slider aria-label="text size" step="1" ng-change="text.setproperty('fontsize', fontsize)" ng-model="fontsize" min="1" max="100"></md-slider>          </div>          <div class="slider-input">             <input type="number" ng-change="text.setproperty('fontsize', fontsize)" ng-model="fontsize"/>          </div>          <div class="text-styles">             <div class="text-style-toolbar" ed-text-align-buttons>                <i data-align="left" class="mdi mdi-format-align-left"></i>                <i data-align="center" class="mdi mdi-format-align-center active"></i>                <i data-align="right" class="mdi mdi-format-align-right"></i>             </div>             <div class="text-style-toolbar text-decoration-buttons" ed-text-decoration-buttons>                <div data-decoration="underline" class="underline toolbar-btn">u</div>                <div data-decoration="line-through" class="line-through toolbar-btn">s</div>                <div data-decoration="overline" class="overline toolbar-btn">o</div>                <div data-decoration="italic" class="italic toolbar-btn">i</div>             </div>          </div>          <div class="colorpicker">             <div class="colorpicker-label"><span>color</span></div>             <input ed-color-picker="text.setproperty('fill', color)" type="text"/>          </div>          <div class="colorpicker">             <md-checkbox class="md-checkbox" ng-model="enablebackground" ng-change="text.toggleproperty('backgroundcolor', enablebackground)" aria-label="background">background</md-checkbox>             <input ed-color-picker="text.setproperty('backgroundcolor', color)" ed-color-picker-disabled="{{ !enablebackground }}" type="text"/>          </div>          <div class="colorpicker">             <md-checkbox class="md-checkbox" ng-model="enableoutline" ng-change="text.toggleproperty('stroke', enableoutline)" aria-label="outline">outline</md-checkbox>             <input ed-color-picker-disabled="{{ !enableoutline }}" ed-color-picker="text.setproperty('stroke', color)" type="text"/>          </div>          <div class="md-inputs">             <md-input-container>                <label>line height</label>                <input type="number" min="1" max="100" ng-model="lineheight" ng-change="text.setproperty('lineheight', lineheight)">             </md-input-container>             <md-input-container>                <label>outline width</label>                <input ng-disabled="!enableoutline" type="number" min="1" max="100" ng-model="strokewidth" ng-change="text.setproperty('strokewidth', strokewidth)">             </md-input-container>          </div>          <div class="buttons">             <md-button ng-click="finishaddingtexttocanvas()" class="md-primary md-raised">save</md-button>             <md-button ng-click="canceladdingtexttocanvas()" class="md-raised">cancel</md-button>          </div>       </section>    </div> </section> 

when select selection box value of font goes in url, here code not working. console showing error missing font family http://fonts.googleapis.com/css?family=