angularjs variables in the view not changing when scope change -

i'm new angularjs. have serious problem. , have been stuck @ point last 48 hours. problem:

my view not updating when update variable in controller. here's code.

var stdata; function mainctrl($scope,$http){  retrievedataset($scope,$http,  'http://localhost:8080/ramap-service/dataprovider?title='+$scope.title+'&year='+$scope.year);    $scope.$apply($scope.changemap = function(){               var curl = 'http://localhost:8080/ramap-service/dataprovider?title='+$scope.title+'&year='+$scope.year;     console.log(curl);             showdialog();     retrievedataset($scope,$http,curl);                               }); function retrievedataset($scope,$http, curl){  $http.get(curl).success(function (data,status){              console.log(data.description);       $scope.desc = data.description;      loadcolors(data.results);      stdata=data.results;      handlekeys($scope,data.results);          }).error(function(data,status){      console.log(data);  }); }  }  function loadcolors(data){ var paths = document.getelementsbytagname('path'); for(var i=0;i<data.length;i++){             for(var j=0;j<paths.length;j++){         var path = paths[j];         if(data[i][4]===path.id){                              path.style.fill=getcolor(data[i][5],data);                             break;         }     } } }  function getcolor(amount, data){ var color;     var segments = segmentthem(data); if(amount<=segments[1]){     color = '#ffe5e9'; }else if(amount<segments[2]){     color = '#ff657b'; }else if(amount < segments[3]){     color = '#b20019'; }else if(amount < segments[4]){     color = '#4c000b'; }else if (amount<segments[5]){     color = '#ffb1bc'; }else if (amount <segments[6]){     color = '#7e0012'; }else{     color = '#fe0024'; } return color;               }  function segmentthem(data){ var min = findmin(data); var max = findmax(data); var diff = max - min; var interval =diff/7;     interval = math.round(interval); interval = roundspecially(interval);     var amounts = new array(); for(var i=0;i<7;i++){     if(i===0){         amounts[i]=min;         continue;     }     var prev = parseint(i)-1;     amounts[i] = amounts[prev]+interval;  } return amounts; }  function findmin(data){   var least =number(data[0][5]); for(var i=0;i<data.length;i++){     var num = number(data[i][5]);     if(num<least){         least=num;     } } return least; }  function findmax(data){ var max = number(data[0][5]); for(var i=0;i<data.length;i++){     var num = number(data[i][5]);     if(num>max){         max=num;     } } return max; }  function handlekeys($scope,data){ var segments = segmentthem(data); var result = new array(); var denom = 0; if((segments[4]/1000000000)>0.99){     denom = 1000000000; }else if ((segments[4]/1000000)>0.99){     denom = 1000000; }else if((segments[4]/1000)>0.99){     denom = 1000; }else{     denom = 100; } for(var i=0; i<segments.length;i++){     result[i] = segments[i]/denom; }        $scope.denom = denom; $scope.results = result; }  function roundspecially(num){ num = num+''; var length = num.length-1; var re = num[0]; for(var i=0; i<length;i++){     re=re+'0'; } return number(re); }  function showinfo(){ var event = window.event; var element = event.srcelement; var data = getdata(element.id);     document.getelementbyid('info').innerhtml= '<b>'+data[3]+'</b>'+"<br>"+currency('n', data[5]);    }  function getdata(id){   var result; for(var i=0;i<stdata.length;i++){     if(id===stdata[i][4]){         result = stdata[i];                             } } if(typeof result === 'undefined'){     return alert("this program has undefined values on line 224"); }else{     return result; }    }  function currency(ssymbol, vvalue) {  vvalue = number(vvalue);  var adigits = vvalue.tofixed(2).split(".");  adigits[0] = adigits[0].split("").reverse().join("").replace(/(\d{3})(?=\d)/g,  "$1,").split("").reverse().join("");   return ssymbol + adigits.join(".");  }  function showdialog(){  var el = document.getelementbyid("myoverlay");   el.style.visibility = (el.style.visibility==='hidden')?'visible':'hidden'; } 

and view this:

<div id="container" ng-controller="mainctrl"> <header>     <img src="img/header3.png"/> </header> <aside >     <h5 >about current dataset</h5>     <p class="points" >title</p>               {{title}} {{year}}     <p class="points">description</p>         {{desc}} </aside> <div  id="colorcode" >     <h5>map key</h5>    ({{denom|currency:"n"}}) <table >   <tr>     <th>color</th>     <th>range</th>   </tr>   <tr>     <td style="background:#ffe5e9;"></td>     <td >{{results[0]}} - {{results[1]}}</td>   </tr>   <tr>     <td  style="background:#ff657b;"></td>     <td >{{results[1]}} - {{results[2]}}</td>   </tr>   <tr>     <td style="background:#b20019"></td>     <td >{{results[2]}} - {{results[3]}}</td>   </tr>   <tr>     <td style="background:#4c000b"></td>     <td>{{results[3]}} - {{results[4]}}</td>     <tr>     <td style="background:#ffb1bc;"></td>     <td>{{results[4]}} - {{results[5]}}</td>   </tr>   <tr>     <td style="background:#7e0012"></td>     <td>{{results[5]}} - {{results[6]}}</td>   </tr>   <tr>     <td style="background:#fe0024"></td>     <td>above {{results[6]}}</td>   </tr> </table> </div> <span onclick="showdialog()" id="editspan"><i class="icon-edit icon-2x"></i><input type="submit" name="button" id="button" value="change dataset"/></span> <div id="info">     </div> <div id="map">           <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" width="797" height="710" viewbox="0 0 297 210" >   <style type="text/css">     .state {fill:#ff0000; stroke:white ; stroke-width:0.5; stroke-opacity:1;}   </style>  </svg> </div> <div id="myoverlay">     <table id="dtable">                            <tr id="row">                             <td id="dtd"><form id="dialogue_box">                         <div class="box1"><label id="label">dataset title:</label></td>                             <td id="dtd"> <select ng-model="title" value="budget works dataset">                           <option value="budget works dataset" id="box" >budget works dataset</option>                                                  </select></td>                           </tr></div>                           <tr>                             <td id="dtd"><div class="box1"><label id="label2">specify year: </td>                             <td id="dtd"></label><select class="first" ng-model="year" >                                 <option value="2009">2009</option>                           <option value="2010">2010</option>                           <option value="2011">2011</option>                           <option value="2012">2012</option>                           <option value="2013">2013</option>                                                                             </select></td>                           </tr></div>                              <tr>                                 <td id="submit"><button id="button" ng-controller="mainctrl" ng-click="changemap()"> enter</button><button id="button" onclick="showdialog()"> cancel</button></td>                             </tr>                          </form></div>                          </table> </div> 

but none of these varibles changing.

if indent code can see controller updating code in aside element , rest of page isn't within mainctrl's scope. few other tags in wrong order. template should fix problems.

<div class="container" ng-controller="mainctrl">     <aside>         <h5>             current dataset         </h5>         <p class="points">             title         </p>         {{ititle}} {{iyear}}         <p class="points">             description         </p>         {{desc}}     </aside>     <div id="myoverlay">         <table id="dtable">             <tr id="row">                 <td id="dtd">                     <form id="dialogue_box">                         <div class="box1">                             <label id="label">                                 dataset title:                             </label>                         </div>                     </form>                 </td>                 <td id="dtd">                     <select ng-model="title" value="budget works dataset">                         <option value="budget works dataset" id="box">                             budget works dataset                         </option>                     </select>                 </td>             </tr>             <tr>                 <td id="dtd">                     <div class="box1">                         <label id="label2">                             specify year:                         </label>                     </div>                 </td>                 <td id="dtd">                     </label>                     <select class="first" ng-model="year">                         <option value="2009">                             2009                         </option>                         <option value="2010">                             2010                         </option>                         <option value="2011">                             2011                         </option>                         <option value="2012">                             2012                         </option>                         <option value="2013">                             2013                         </option>                     </select>                 </td>             </tr>             <tr>                 <td id="submit">                     <button id="button" ng-controller="mainctrl" ng-click="changemap()">                         enter                     </button>                     <button id="button" onclick="showdialog()">                         cancel                     </button>                 </td>             </tr>         </table>     </div> </div> 

now there containing div ng-controller="mainctrl" tag , should update rest of template in scope.