javascript - Brand new to angular. Making a very simple test app. Can't figure something out -

i've been learning web development 5 months now, , first time trying out angular. when watched tutorial using ng-model , {{curly-brace expressions}} bind data, wanted try out make simple google font pairing app. enter text header, , body, , can choose different fonts drop down menus each test various font pairings. simple idea. , works. 1 problem i'm having making names of fonts in drop-down menus written in font. here's have far (and sorry, css i'm including bunch of @imports fonts work in test environment. kind of ugly):

var app = angular.module("app", []);  app.controller('fonttester', function($scope){    $scope.fonts=["open sans", "roboto", "roboto condensed", "lato", "oswald","lora","source sans pro", "pt sans", "open sans condensed", "droid sans", "raleway", "montserrat", "ubuntu", "droid serif", "roboto slab", "merriweather", "arimo", "pt sans narrow", "noto sans", "bitter", "titillium web", "lobster", "pt serif", "oxygen", "dosis", "hind", "cabin", "arvo", "fjalla one", "playfair display", "vollkorn", "abel", "bree serif", "muli", "poiret one", "francois one", "noto serif", "nunito", "signika", "play", "inconsolata", "ubuntu condensed", "archivo narrow", "anton", "cuprum", "alegreya", "pacifico", "karla", "libre baskerville", "josephin sans", "asap", "maven pro", "rokkitt", "merriweather sans", "monda", "dancing script", "quicksand", "exo", "varela round", "pt sans caption", "crimson text", "crete round", "questrial", "pathway gothic one", "fira sans", "ropa sans", "abril fatface", "armata", "patua one", "news cycle", "pontano sans", "istok web", "gudea", "josephin slab", "noticia text", "eb garamond", "cabin condensed", "jura", "sanchez", "lobster two", "benchnine", "quattrocento sans", "old standard tt", "courgette", "ruda", "playball", "alfa slab one", "righteous", "kreon", "passion one"].sort();  })

@import url(http://fonts.googleapis.com/css?family=open+sans);  @import url(http://fonts.googleapis.com/css?family=roboto);  @import url(http://fonts.googleapis.com/css?family=roboto+condensed);  @import url(http://fonts.googleapis.com/css?family=lato);  @import url(http://fonts.googleapis.com/css?family=oswald);  @import url(http://fonts.googleapis.com/css?family=lora);  @import url(http://fonts.googleapis.com/css?family=source+sans+pro);  @import url(http://fonts.googleapis.com/css?family=pt+sans);  @import url(http://fonts.googleapis.com/css?family=open+sans+condensed:300);  @import url(http://fonts.googleapis.com/css?family=droid+sans);  @import url(http://fonts.googleapis.com/css?family=raleway);  @import url(http://fonts.googleapis.com/css?family=monterrat);  @import url(http://fonts.googleapis.com/css?family=ubuntu);  @import url(http://fonts.googleapis.com/css?family=droid+serif);  @import url(http://fonts.googleapis.com/css?family=roboto+slab);  @import url(http://fonts.googleapis.com/css?family=merriweather);  @import url(http://fonts.googleapis.com/css?family=arimo);  @import url(http://fonts.googleapis.com/css?family=pt+sans+narrow);  @import url(http://fonts.googleapis.com/css?family=noto+sans);  @import url(http://fonts.googleapis.com/css?family=bitter);  @import url(http://fonts.googleapis.com/css?family=titillium+web);  @import url(http://fonts.googleapis.com/css?family=lobster);  @import url(http://fonts.googleapis.com/css?family=pt+serif);  @import url(http://fonts.googleapis.com/css?family=oxygen);  @import url(http://fonts.googleapis.com/css?family=dosis);  @import url(http://fonts.googleapis.com/css?family=hind);  @import url(http://fonts.googleapis.com/css?family=cabin);  @import url(http://fonts.googleapis.com/css?family=arvo);  @import url(http://fonts.googleapis.com/css?family=fjalla+one);  @import url(http://fonts.googleapis.com/css?family=playfair+display);  @import url(http://fonts.googleapis.com/css?family=vollkorn);  @import url(http://fonts.googleapis.com/css?family=abel);  @import url(http://fonts.googleapis.com/css?family=bree+serif);  @import url(http://fonts.googleapis.com/css?family=muli);  @import url(http://fonts.googleapis.com/css?family=poiret+one);  @import url(http://fonts.googleapis.com/css?family=francois+one);  @import url(http://fonts.googleapis.com/css?family=noto+serif);  @import url(http://fonts.googleapis.com/css?family=nunito);  @import url(http://fonts.googleapis.com/css?family=signika);  @import url(http://fonts.googleapis.com/css?family=play);  @import url(http://fonts.googleapis.com/css?family=inconsolata);  @import url(http://fonts.googleapis.com/css?family=ubuntu+condensed);  @import url(http://fonts.googleapis.com/css?family=archivo+narrow);  @import url(http://fonts.googleapis.com/css?family=anton);  @import url(http://fonts.googleapis.com/css?family=cuprum);  @import url(http://fonts.googleapis.com/css?family=alegreya);  @import url(http://fonts.googleapis.com/css?family=pacifico);  @import url(http://fonts.googleapis.com/css?family=karla);  @import url(http://fonts.googleapis.com/css?family=libre+baskerville);  @import url(http://fonts.googleapis.com/css?family=josephin+sans);  @import url(http://fonts.googleapis.com/css?family=asap);  @import url(http://fonts.googleapis.com/css?family=maven+pro);  @import url(http://fonts.googleapis.com/css?family=rokkitt);  @import url(http://fonts.googleapis.com/css?family=merriweather+sans);  @import url(http://fonts.googleapis.com/css?family=monda);  @import url(http://fonts.googleapis.com/css?family=dancing+script);  @import url(http://fonts.googleapis.com/css?family=quicksand);  @import url(http://fonts.googleapis.com/css?family=exo);  @import url(http://fonts.googleapis.com/css?family=varela+round);  @import url(http://fonts.googleapis.com/css?family=pt+sans+caption);  @import url(http://fonts.googleapis.com/css?family=crimson+text);  @import url(http://fonts.googleapis.com/css?family=crete+round);  @import url(http://fonts.googleapis.com/css?family=questrial);  @import url(http://fonts.googleapis.com/css?family=pathway+gothic+one);  @import url(http://fonts.googleapis.com/css?family=fira+sans);  @import url(http://fonts.googleapis.com/css?family=ropa+sans);  @import url(http://fonts.googleapis.com/css?family=abril+fatface);  @import url(http://fonts.googleapis.com/css?family=armata);  @import url(http://fonts.googleapis.com/css?family=patua+one);  @import url(http://fonts.googleapis.com/css?family=news+cycle);  @import url(http://fonts.googleapis.com/css?family=pontano+sans);  @import url(http://fonts.googleapis.com/css?family=istok+web);  @import url(http://fonts.googleapis.com/css?family=gudea);  @import url(http://fonts.googleapis.com/css?family=josephin+slab);  @import url(http://fonts.googleapis.com/css?family=noticia+text);  @import url(http://fonts.googleapis.com/css?family=eb+garamond);  @import url(http://fonts.googleapis.com/css?family=cabin+condensed);  @import url(http://fonts.googleapis.com/css?family=jura);  @import url(http://fonts.googleapis.com/css?family=sanchez);  @import url(http://fonts.googleapis.com/css?family=lobster+two);  @import url(http://fonts.googleapis.com/css?family=benchnine);  @import url(http://fonts.googleapis.com/css?family=quattrocento+sans);  @import url(http://fonts.googleapis.com/css?family=old+standard+tt);  @import url(http://fonts.googleapis.com/css?family=courgette);  @import url(http://fonts.googleapis.com/css?family=ruda);  @import url(http://fonts.googleapis.com/css?family=playball);  @import url(http://fonts.googleapis.com/css?family=alfa+slab+one);  @import url(http://fonts.googleapis.com/css?family=righteous);  @import url(http://fonts.googleapis.com/css?family=kreon);  @import url(http://fonts.googleapis.com/css?family=passion+one);          body {    background: #bbb;  }  input {    margin: 0 0 20px 0;    font-family: mono;    font-size: 16px;    padding: 5px;    border: 1px solid black;  }  select {    display: block;    margin: 0 0 20px 0;    font-size: 16px;    padding: 5px;    border: 1px solid black;    background: white;    font-family: mono;  }  textarea {    border: 1px solid black;    padding: 5px;    font-family: mono;    font-size: 16px;    resize: none;  }  h1 {    font-size: 42px;  }  p {    font-size: 18px;    margin: 0;  }  .inputs {    float: left;    padding: 10px;  }  .inputs>p {    width: 200px;  }  .sampletext {    background: white;    float: left;    width: 600px;    height: 500px;    border: 1px solid black;  }  .sampletext>h1, .sampletext>p {    padding: 0 20px;  }

<html ng-app="app">    <head>      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">         </script>    </head>    <body ng-controller="fonttester">      <h1></h1>      <div class="inputs">        <div class="header">          <p>select header font:</p>          <select ng-model="headerfont">            <option ng-repeat="font in fonts" value="{{font}}">{{font}}</option>          </select>          <p>set header text:</p>          <input type="text" ng-model="header">        </div>        <div class="bodytext">          <p>select body font:</p>          <select ng-model="bodyfont">            <option ng-repeat="font in fonts" value="{{font}}">{{font}}</option>          </select>          <p>set body text:</p>          <textarea rows="8" cols="19" ng-model="bodytext"></textarea>        </div>      </div>      <div class="sampletext" style="background:{{bgcolor}};">        <h1 style="font-family: '{{headerfont}}';">{{header}}</h1>        <p style="font-family: '{{bodyfont}}';">{{bodytext}}</p>      </div>    </body>  </html>

i tried wrapping {{font}} that's in ng-repeated options inside of , didn't work. extremely limited knowledge of data-binding, can't think of other way it, , it's bothering me. know why didn't work, , can make work?

this should work using ng-style (https://docs.angularjs.org/api/ng/directive/ngstyle)

<select ng-model="bodyfont">       <option ng-repeat="font in fonts" value="{{font}}" ng-style="{'font-family':font}>{{font}}</option>  </select>