AngularJS scope function isn't working with no console errors - angularjs

Question

I have this app that get some data about weather in specific region:
And I want to change the current temperature from Celsius to Fahrenheit by just clicking on the the C/F buttons. I tried the following script:
In app.JS and inside the controller of the current page:
$scope.convertToFahrenheit = function(degF)
{
return Math.round(1.8*(degF - 273) +32);
}
Now in the html page I did the following:
Degree:
<button ng-click="convertToCelsius(w.temp.day)" class="btn btn-info">
C
</button> |
<button ng-click="convertToFahrenheit(w.temp.day)" class="btn btn-info">
F
</button>
This is the all app.JS script:
// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
// ROUTES
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
.when('/forecast/:days', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
//Services
weatherApp.service('cityService', function()
{
this.city = 'Rayak, ZA';
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', 'cityService', function($scope, cityService) {
$scope.city = cityService.city;
//We are going to watch if the city text box is changed and updated the service
$scope.$watch('city', function()
{
cityService.city = $scope.city;
});
}]);
weatherApp.controller('forecastController', ['$scope', '$resource', '$routeParams', 'cityService', '$log', function($scope, $resource, $routeParams, cityService, $log) {
$scope.city = cityService.city;
$scope.weatherApi = $resource("http://api.openweathermap.org/data/2.5/forecast/daily?APPID=fcbc7173d3b696941002572f3f807129",
{callback: "JSON_CALLBACK"}, {get:{method: "JSONP"}});
$scope.days = $routeParams.days || 2;
$scope.weatherResult = $scope.weatherApi.get({q: $scope.city, cnt: $scope.days})
$log.log($scope.weatherResult);
$scope.convertToCelsius = function(degC)
{
return Math.round(degC - 273.15);
}
$scope.convertToFahrenheit = function(degF)
{
return Math.round(1.8*(degF - 273) +32);
}
$scope.convertToDate = function(toDate)
{
return new Date(toDate*1000);
}
}]);
And here is the forecast.htm script:
<label class="label label-info">Forecast for {{ city }} </label>
<hr/>
Days: 2 | 5 | 10
Degree: <button ng-click="convertToCelsius(w.temp.day)" class="btn btn-info">C</button> | <button ng-click="convertToFahrenheit(w.temp.day)" class="btn btn-info">F</button>
<div ng-repeat="w in weatherResult.list">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">{{ convertToDate(w.dt) | date: 'MMM, d, y' }}</h3>
</div>
<div class="panel-body">
<div class="col-sm-3">
{{w.temp.weather.icon}}
</div>
<hr/>
Daytime temperature {{convertToCelsius(w.temp.day)}}
</div>
</div>
</div>
</div>
</div>
The convertToCelsius() is working properly, and I tried to get the convertToFahrenheit() function inside the ng-repeat because the w is inside of it, but still no changes.

Answer 1

You have to store in the scope what kind of values to display and then use convertToCelsius or convertToFahrenheit according to that variable. So in your app.js, in forecastController add the following line
$scope.display = 'C';
Then change your buttons like this
<button ng-click="display = 'C'" class="btn btn-info">C</button> | <button ng-click="display = 'F'" class="btn btn-info">F</button>
And display the temp like this
Daytime temperature {{display == 'C'?convertToCelsius(w.temp.day):convertToFahrenheit(w.temp.day)}}
The display variable will decide if the temp will display as Celsius or Fahrenheit
hope this helps,
John