Highcharts in a div container - html

Question

I have a problem to show my Highchart in a container div.
In the .html file I have the next code:
<div class="col-md-12" style="margin-top:10px">
<div id="container" style="width:100%; height: 500px;"></div>
In my controller I have a function which I create the chart after doing query to the DB and to save the data in the variable media. The chart is created as follows:
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Media'
},
subtitle: {
text: '..'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Media'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Media: {point.y:.1f}'
},
series: [{
name: 'Population',
data: media,
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
The "data" are received correctly, the problem is that when I click in a button to call this function and I try to show the chart, appears "http://localhost:8080/graphics#container" in my address bar but the chart doesn't appear till I click the button a second time.
I don't understand why is it happening this and how can I do to show the data in my "first click".
If anyone can help me I will be very grateful.
Thank you!
SOLVED
The probrlem was another function which I used to move the scroll. I deleted it and everything works fine!
The fuction was the following:
function downScroll(){
$location.hash('container');
call $anchorScroll()
$anchorScroll();
}